CSS 그리드는 CSS에서 가장 강력한 레이아웃 시스템이지만, 그리드 속성을 직접 작성하는 것은 번거롭습니다 — 특히 컬럼 수, 간격 크기, 명명된 템플릿 영역을 반복적으로 조정할 때. CSS 그리드 생성기를 사용하면 레이아웃을 시각적으로 구성하고 필요한 CSS를 바로 복사할 수 있습니다.
CSS 그리드 동작 원리
CSS 그리드는 컨테이너를 2차원 레이아웃 시스템으로 변환합니다. Flexbox(단일 축을 따라 아이템 배치)와 달리 그리드는 행과 열 모두를 동시에 명시적으로 제어합니다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1.5rem;
}이렇게 하면 3열 그리드가 생성되어 각 열이 사용 가능한 너비를 균등하게 나누고, 모든 셀 사이에 1.5rem 간격이 추가됩니다.
핵심 그리드 속성
grid-template-columns와 grid-template-rows
그리드의 트랙 구조를 정의합니다. 가장 일반적인 패턴:
| 패턴 | CSS | 결과 |
|---|---|---|
| 균등 컬럼 | repeat(3, 1fr) | 3개 동일 너비 컬럼 |
| 고정 + 유동 | 240px 1fr | 사이드바 + 메인 콘텐츠 |
| 명명된 영역 | [sidebar] 240px [main] 1fr | 명명된 컬럼 트랙 |
| 자동 채우기 | repeat(auto-fill, minmax(200px, 1fr)) | 반응형 카드 그리드 |
| 혼합 단위 | 200px 1fr 2fr | 고정 후 유동 컬럼 2개 |
gap (구 grid-gap)
트랙 사이의 간격을 제어합니다. 행과 열 간격을 각각 설정할 수 있습니다:
gap: 1rem; /* 양방향 동일 간격 */
gap: 1rem 2rem; /* row-gap column-gap */
row-gap: 1rem;
column-gap: 2rem;grid-column과 grid-row
그리드 내에서 아이템을 명시적으로 배치:
.hero {
grid-column: 1 / -1; /* 전체 너비 스팬 */
grid-row: 1 / 3; /* 2행 스팬 */
}
.sidebar {
grid-column: 1;
grid-row: 2 / 5;
}
.main {
grid-column: 2 / -1;
grid-row: 2 / 5;
}-1은 마지막 그리드 라인을 가리키므로, 1 / -1은 컬럼 수와 관계없이 항상 전체 너비가 됩니다.
grid-template-areas
명명된 영역으로 복잡한 레이아웃을 가독성 높게:
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }grid-template-areas의 각 문자열은 하나의 행을 나타냅니다. 반복된 이름은 여러 셀에 스팬됩니다. .은 빈 셀을 나타냅니다.
일반적인 그리드 패턴
카드 그리드 (자동 반응형)
가장 일반적인 사용 사례: 미디어 쿼리 없이 사용 가능한 공간을 채우고 자연스럽게 줄 바꿈하는 카드 그리드.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}auto-fill은 맞는 만큼 컬럼을 생성합니다. minmax(280px, 1fr)으로 각 카드는 최소 280px 너비를 유지하면서 사용 가능한 공간으로 확장됩니다.
홀리 그레일 레이아웃
헤더와 푸터가 있는 고전적인 3열 레이아웃:
.page {
display: grid;
grid-template-columns: 200px 1fr 160px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
}메이슨리 스타일 그리드
진정한 메이슨리에는 JavaScript가 필요하지만 근사치를 구현할 수 있습니다:
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 10px;
gap: 10px;
}
/* 각 아이템은 콘텐츠 높이에 따라 행을 스팬 */
.item { grid-row-end: span 20; } /* 짧은 */
.item.tall { grid-row-end: span 35; } /* 긴 */대시보드 그리드
.dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.widget-full { grid-column: span 12; }
.widget-half { grid-column: span 6; }
.widget-third { grid-column: span 4; }
.widget-quarter { grid-column: span 3; }그리드 레이아웃 반응형으로 만들기
미디어 쿼리 방식
.grid {
display: grid;
grid-template-columns: 1fr; /* 모바일: 1열 */
gap: 1rem;
}
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}auto-fill + minmax (미디어 쿼리 없음)
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: 1rem;
}min(100%, 280px)은 매우 좁은 화면에서의 오버플로를 방지합니다 — minmax의 흔한 함정입니다.
명명된 영역 + 미디어 쿼리
.layout {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 1fr 300px;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
}그리드 vs Flexbox: 언제 무엇을 사용할까
두 가지 모두 현대적인 레이아웃 도구입니다. 구분은 간단합니다:
- 그리드: 2차원 레이아웃. 행과 열 모두 제어. 페이지 구조, 대시보드, 카드 그리드, 폼 레이아웃에 사용.
- Flexbox: 1차원. 아이템이 단일 축을 따라 흐릅니다. 내비게이션 바, 버튼 그룹, 단일 요소 중앙 정렬, 행 내 아이템 정렬에 사용.
두 가지를 조합해서 사용할 수도 있습니다 — 그리드 레이아웃 안에 Flex 컨테이너를 넣거나, 그 반대도 가능합니다.
그리드 레이아웃 디버깅
Chrome, Firefox, Edge 모두 DevTools에 내장 그리드 인스펙터가 있습니다. Elements 패널에서 그리드 컨테이너 옆의 grid 배지를 클릭하면 페이지에 그리드 라인이 오버레이되어 컬럼/행 번호와 간격을 확인할 수 있습니다.
Firefox의 그리드 인스펙터는 특히 강력하여 명명된 영역 하이라이트와 여러 그리드 동시 오버레이를 지원합니다.
CSS 그리드 생성기 활용하기
복잡한 레이아웃에서 grid-template-columns, grid-template-rows, gap 값을 수동으로 설정하면 시행착오가 필요합니다. CSS 그리드 생성기를 사용하면:
- 컬럼과 행 수를 시각적으로 설정
- 드래그로 트랙 크기 조정
fr,px,%,auto단위 전환- 완성된 CSS 블록을 복사하여 바로 붙여넣기