1. Grid가 뭐야?
Grid는 가장 최근에 등장한 레이아웃 속성으로 단차원 정렬(1차원 정렬)에 제한되는 flex에 비해 다차원 정렬(2차원 정렬) 이 가능합니다. 이 Grid를 활용하면 container를 여러번 생성하여 다차원 정렬을 구현해야 하는 flex에 비해 다차원 속성을 통한 보다 유동적인 요소 배치가 가능해집니다.
또한 이 Grid의 기본적인 구성 요소는 각각 grid-container, gird-line(세로열), grid-number(가로열), grid-item으로 불리는데요. 이러한 Grid는 큰 규모의 레이아웃을 구성할 시, 또는 기획의 구성이 확실히 잡혔거나 변경 가능성이 적을 시, 효율적인 반응형 웹페이지의 구현을 필요로 할시 사용됩니다.
2. Grid의 세부 속성
grid-template-rows: grid의 행의 개수와 크기를 지정하며 단위는 fr(fraction | 분수 | 비율)과 절대 단위를 단독으로 사용하지 않아도 일부 절대 단위 및 상대 단위를 혼용해서 사용 할 수 있습니다.
이때 작성 된 요소 개수에 따라 해당 행의 개수가 정해집니다(예시 : 1fr 2fr 3fr로 지정시 행의 개수는 총 3개 입니다.)
grid-template-columns: rows와 마찬가지로 열의 개수와 크기를 지정하며 이하 설명은 rows와 동일합니다.⭐ 이 두 속성의 속성값에 fr을 사용시 해당 비율로 각 아이템의 크기가 배분이 됩니다. 예를 들어 columns에 1fr 2fr 3fr 세 아이템 속성값을 생성 했다면 각각의 아이템의 크기는 1 : 2 : 3의 비율을 가지게 됩니다.
또한 이들 속성값에 repeat 함수를 이용해 특정 아이템들의 크기를 반복해서 생성하는 것도 가능합니다. (예시 : repeat(4 1fr) → 1fr 1fr 1fr 1fr)
이 repeat 함수는 다른 기본 속성값과 혼용해서 사용이 가능합니다. (예시 :
grid-template-columns: 100px repeat(3 1fr) → 100px짜리 칼럼 하나와 1fr짜리 칼럼 세개 생성)
grid-row: 해당 아이템의 grid-number(가로열)이 템플릿에 차지하는 비중을 정할 때 사용합니다.기본적으로 (시작 넘버)/(종료 넘버) 로 해당 아이템이 시작되는 넘버 부터 종료 되는 넘버 까지 가로 영역을 차지하게 되며, 1/2로 설정을 하게 되면 가로열 넘버 1부터 넘버2까지의 그리드 템플릿 영역을 차지하게 됩니다.
또한 단위에 span 태그를 사용해 1/span 2 이런 식으로 해당 영역의 방향 공간을 차지하도록 설정 할 수도 있습니다.
grid-columns: 해당 아이템이 템플릿에 차지하는 비중을 정할 때 사용합니다. (설명은 row와 동일)
