Grid Layout

Grid 레이아웃이란?

CSS 레이아웃 시스템의 역사

Float ➡️ Flex ➡️ Grid
(현대에는 Flex와 Grid를 상황에 따라 혼용)

flex vs grid

flex

• 1차원적 구조를 가짐
• row / column 중 하나를 택하여 배치 방향을 결정
  

grid

• 2차원적 구조를 가짐
• row & column 방향의 배치 방식을 동시에 설정
  

Grid 속성

display:grid가 적용된 요소는 다음과 같은 구조로 변경

• grid-container: grid가 적용된 요소
• grid-item: grid가 적용된 요소의 자식들
• grid-line: grid-item 사이의 경계
• grid-number: 해당 grid-line이 몇 번째 line인지를 의미 (1부터 시작)

grid-template

grid의 행(row) & 열(column) 의 개수 및 크기를 지정

/*fr(fraction) : 비율 단위*/
grid-template-rows : 1fr 2fr 200px
grid-template-columns : 1fr 2fr 200px

/*repeat(a, b) : b규격의 grid-template을 a개 생성*/
grid-template-columns: repeat(4, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr;

grid-column & grid-row

• grid-item 에 줄 수 있는 속성
• 각각의 grid-item이 열과 행 방향으로 차지할 영역의 크기를 지정
• 시작지점과 종료지점의 grid-number를 입력

grid-column: 1 / 4;  /*grid number 1부터 4까지*/
grid-row: 2 / 3;     /*grid number 2부터 3까지*/

Flex 와 Grid 의 차이점

Flex

• 비교적 작은 단위의 레이아웃 구성에 적합
• 작업 유동성이 높음
• 디자인 변경 가능성이 있는 경우에 적합

Grid

• 큰 규모의 레이아웃 구성에 적합
• 레이아웃 구조가 확실할 경우 효율적으로 반응형 디자인 구현 가능
• 상대적으로 최신 기술이기 때문에 모든 브라우저에서 지원하지 않음