CSS Grid 생성기
grid-template-columns/rows, justify-items, align-items, gap를 GUI로 조작하며 실시간 미리보기로 실제 CSS Grid 레이아웃을 테스트할 수 있는 무료 도구입니다. 생성된 CSS 코드는 클릭 한 번으로 복사할 수 있습니다.
사용 팁
- grid-template-columns: repeat(3, 1fr)의 fr 단위는 "남은 공간을 나누는 비율"을 나타내므로, 화면 너비가 바뀌어도 열의 비율이 그대로 유지됩니다.
- gap 속성은 행과 열 사이의 여백에만 적용되며, margin과 달리 그리드 바깥쪽에는 영향을 주지 않습니다. row-gap과 column-gap을 따로 지정할 수도 있습니다.
- "auto"로 설정한 트랙은 실제 콘텐츠 크기에 맞춰 늘어나거나 줄어들기 때문에, 내용 길이가 일정하지 않은 열이나 행에 적합합니다.
- grid-column: span 2와 같이 개별 아이템에 오버라이드를 적용하면 헤더나 푸터만 그리드 전체 너비로 확장할 수 있습니다.
- 행과 열을 동시에 제어해야 하는 복잡한 격자 레이아웃에는 Grid를, 한 방향으로만 나열하면 충분한 경우에는 Flexbox를 사용하세요(CSS Flexbox 생성기도 참고하세요).
자주 묻는 질문
여담이지만 ― Flexbox가 다루지 않는 "2차원"을 지향한 CSS Grid
CSS Grid Layout은 한 방향으로 나열하는 데 특화된 Flexbox와 달리, 행과 열을 동시에 정의할 수 있는 2차원 레이아웃 시스템으로 설계되었습니다. W3C에서의 표준화는 2011년 무렵부터 진행되었으며, 2017년 Chrome・Firefox・Safari・Edge 등 주요 브라우저가 거의 동시에 지원을 구현하면서 실무 도입이 급속히 확산되었습니다.
Grid가 등장하기 전, 헤더・사이드바・메인 콘텐츠・푸터로 이루어진 이른바 "홀리그레일" 구조로 페이지를 배치하려면 float나 테이블 태그를 이용한 복잡한 편법에 의존할 수밖에 없었습니다. CSS Grid는 grid-template-columns・grid-template-rows・grid-template-areas와 같은 선언적 속성을 도입해, 이 정석 레이아웃을 단 몇 줄의 CSS만으로 구현할 수 있게 했습니다.
오늘날에는 대시보드 UI・이미지 갤러리・잡지 스타일 레이아웃처럼 행과 열을 의식한 디자인 작업 대부분이 CSS Grid로 구현되고 있습니다. 중첩된 그리드가 부모의 트랙 크기를 물려받을 수 있는 "subgrid" 지원도 주요 브라우저에서 확산되고 있어, 더 복잡한 다단계 레이아웃의 일관성을 유지하기가 쉬워지고 있습니다.
실무에서는 "페이지 전체 골격은 Grid, 컴포넌트 내부 요소 배치는 Flexbox"라는 역할 분담이 정착되어 가고 있습니다. 둘은 경쟁 관계의 기술이 아니라, 1차원 정렬과 2차원 격자 배치라는 서로 다른 강점을 지닌 상호 보완적인 도구이며, 한 페이지 안에서 두 가지를 함께 사용하는 것이 오히려 표준적인 방식으로 여겨집니다.