✅Grid

Grid란?

• 웹페이지를 위한 이차원 레이아웃 시스템이다.

• 컨테이너를 가지고 행과 열을만든 다음 내부에 아이템을 차례대로 하나씩 그리드 틀에 맞춰 넣는 개념이다.

• 틀을 만든다. 행과 열을 만들고 하나에 아이템을 차례대로 자리를 잡는 형태이다.

• 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있다.

• 2차원이기 때문에 행과 열이 존재한다.

• 각 행과 열 사이에 공백이 있는데, 이를 gutters라고 부른다.

• grid 레이아웃은 열병합 행병합이 가능하다.

1. Container - grid 만들기

• 컨테이너를 만들고 내부에 아이템을 차례대로 넣는 형태이다.
• display : grid로 선언한다.

• grid-template-row
• 몇개의 그리드 행을 가지게 될 것인지 선언을 한다.
• 선언을 할 때 개수를 넣는게 아니라 값을 입력하여 선언을 한다. ex) 50px 1fr 1fr 이면 3개의 row

• grid-template-column
• 몇개의 그리드 열을 가지게 될 것인지 선언을 한다.
• 선언을 할 때 개수를 넣는게 아니라 값을 입력하여 선언을 한다. ex) 50px 1fr 1fr 이면 3개의 row

아래와 같이 선언도 가능하다.

grid-template-rows : repeat(4, 1fr)  // 1fr크기 만큼 4번 반복한다

• grid-template-areas
• 각각의 아이템에 이름표를 붙여주는 속성이다.
• 자리를 차지하고 싶지 않을때는 .을 붙이면 된다.
• areas를 적용할 때는 몇개의 column, row를 만들지 선언을 반드시 해야한다.
• 각 영역에 이름을 꼭 부여해야 한다. 이름은 꼭 다 달라야한다. 그리고 선언할때 반드시 행과 열에 맞춰 선언을 해야한다.

아래와 같은 방식으로는 절대 안된다. 선언한 행과 열에 맞춰 꼭 선언을 해야한다.

grid-templates-area : 
" a b c",
" a   c",
" a b  "

그리고 이렇게 영역을 만들면 html에서 작성한 태그의 class에 grid-area에 만든 영역명을 또 선언을 해줘야 한다.

grid-template-areas:
"a b c"

.section1 {
	grid-area : a
}

이런식으로 지정을 꼭 해줘야한다.

개발자 도구로 보면 이렇게 영역이 나눠진 것을 확인할 수 있다.

3. Container - grid-auto-rows / columns

• 행과 열을 명시하기 위해 grid-template-rows, columns를 사용하는데 grid-auto-rows나 column을 사용하면 명시한 행과 열에 수보다 넘쳐나는 애들이 생겨나면 자동으로 선안한 높이와 너비만큼 아이템에 부여가 된다.

4. Container - grid-auto-flow

• 아이템들이 자기 자리를 찾아 들어가는 과정이 일련의 css에 계산, 알고리즘에 의하여 들어가게 되는데 이런 자리 잡는 방법에 흐름을 어떻게 할지 결정하는게 grid-auto-flow이다.
• 쉽게 설명하면 item을 어떻게 배치할지 정하는 속성이다.
• 기본값은 row이다.

grid-auto-flow가 row면 주축(메인축) 방향으로
column이면 교차축 방향으로 채워진다.

5. grid(shorthand) 단축속성

• grid 속성은 grid-template-row와 grid-template-columns를 단축해서 사용할 수 있는 속성이다.

grid : row / column 

// 예시
grid : 1fr 2fr 3fr / 100px 200px;

// grid-auto-flow를 넣을려면 아래와 같이 사용하면 된다.
grid : auto-flow 1fr 2fr / autoflow 1fr 2fr

6. Container - justify-content, align-content

• justify-content
• 메인축을 기준으로 내부에 있는 아이템들의 덩어리를 어떻게 배치할지 결정한다.

• align-content
• 교차축을 기준으로 어떻게 나열할지 정의한다.

7. Container - justify-items, align-items

• items는 하나에 아이템에 대한 정렬을 뜻한다.
• 하나에 틀 안에서 아이템 한개를 어떻게 정렬할지를 정한다.

8. item - grid-row, grid-column

• grid-row는 grid-row-end, grid-row-start의 단축속성이다.

9. grid-area

• grid-template-area로 영역의 이름들을 만들어서 위치를 지정하는데 그때 area에 이름을 지정해준다.

• 단축속성으로도 사용이 가능하다.

• start 값을 두개를 명시한다.

grid-area : row / column / start

grid-area : 4 / 2 / span2 / -1

10. item - order

• flexbox에서 사용한 것 처럼 item들에 순서를 정하는 속성이다.
• 기본값은 0이다.

11. item - z-index

• 플렉스 박스에서 사용한 것 처럼 z축의 순서를 정하는 속성이다.

12. grid 단위 - fr, min-content, max-content

• fr (fragment)
• 비율을 사용하여 나눌때 사용한다. 다른 단위와 혼합해서도 사용가능하다.
• 만약, 100px 1fr 1fr이면 전체에서 100px 뺀 영역을 나머지 영역이 1대1 비율로 나눈다.

• min-content
• 키워드 자체를 넣어서 사용가능하다. 최소 크기만큼. 그니깐 콘텐츠 내용 만큼 제일 긴 모양을 가진 단어에 따라 크기가 바뀐다. 더 이상 줄어들 수 없을 수 없을 때까지

• max-content
• 키워드 자체를 넣어서 사용가능하다. max-content는 이 컨텐츠를 한줄로 볼 수 있는 형태까지 최도 늘린다. 그리고 남은 길이를 비율로 나눈다.

13. grid 단위 - auto-fill, auto-fit

auto-fill과 auto-fit은 반응형으로 만들 때 사용한다.

• auto-fill
• 뷰포트로 크기가 늘어날 때 column에 개수를 유연하게 넣을 수 있다. ex) repeat(auto-fill, 100px);
• ex) repeat(auto-fill, 100px);
• 만약에 그리드 크기가 나은 영역이 있을 경우에 다 채울 수 있는 해결방법은 minma(min, max) → min-width max-width랑 똑같다.
• repeat(auto-fill, minmax(100px, 1fr)); 이렇게 하면 최소가 100px, 최대가 1대1 이렇게 하면 단 1px도 빈 공간이 생기지 않는다.

  </li>

• auto-fill
• 요소가 적을때 사용하고, 남은 공간을 다 채워준다.