CSS Grid, 2017년 출시, 2D 레이아웃의 표준

한 줄로

웹 페이지의 2차원 레이아웃을 격자로 만드는 CSS 표준입니다. 2017년 모든 주요 브라우저에 동시 도입됐습니다.

어디서 왔나

웹 레이아웃의 역사는 한 마디로 "고통의 연속"이었습니다.

1990년대: <table> 태그로 레이아웃. 의미는 잘못됐지만 작동했습니다.

2000년대: float + clear 트릭. 끔찍하게 복잡했습니다.

2010년대 초: 프레임워크 (Bootstrap)의 12-column 시스템으로 위장.

2011년경 마이크로소프트 IE 10이 처음으로 display: grid를 실험적으로 지원했습니다. 한참 외면받다가 2017년 3월, Chrome, Firefox, Safari, Edge가 거의 동시에 정식 지원합니다. 모든 모던 브라우저에서 즉시 사용 가능해졌습니다.

기본 개념

.container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 1fr auto; gap: 16px; }

이 한 줄로 세 컬럼 곱하기 세 행 레이아웃이 완성됩니다. fr 단위는 "fraction"이며 사용 가능한 공간의 비율입니다.

Flexbox와의 차이

Flexbox: 1차원 (행 또는 열).

CSS Grid: 2차원 (행과 열 동시).

대부분의 레이아웃은 둘을 조합합니다. Grid로 페이지 골격, Flexbox로 컴포넌트 내부입니다.

강력한 기능

명명된 그리드 영역

grid-template-areas: "header header header" "sidebar main main" "footer footer footer";

자동 배치: grid-auto-flow로 자동 정렬.

반응형: auto-fit + minmax()로 화면 크기에 따라 자동 조정.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

이 한 줄이면 화면이 좁아질수록 자동으로 컬럼 수가 줄어듭니다.

Subgrid (2022)

CSS Grid Level 2의 subgrid는 자식 요소가 부모의 그리드를 상속받습니다. Safari, Firefox는 2022년 지원, Chrome은 2023년 9월 지원합니다.

바이브 메이커가 챙길 한 가지

복잡한 페이지 레이아웃을 만든다면 CSS Grid가 거의 항상 더 단순하고 깔끔합니다. Tailwind에서는 grid grid-cols-3 gap-4 같은 유틸리티로 즉시 사용 가능합니다. 한 번 익숙해지면 float로 돌아가지 않습니다.

관련

Flexbox · Responsive design · Container queries