레슨 5 / 9·20분
CSS Grid 레이아웃
CSS Grid란?
CSS Grid는 행(row)과 열(column)을 동시에 제어하는 2차원 레이아웃 시스템입니다. Flexbox가 한 방향(행 또는 열)을 다루는 데 강점이 있다면, Grid는 복잡한 레이아웃을 행과 열 모두에서 정밀하게 배치할 때 강력합니다.
css
/* 기본 Grid 컨테이너 */
.grid-container {
display: grid;
/* 3열 그리드: 각 200px */
grid-template-columns: 200px 200px 200px;
/* fr 단위: 남은 공간을 비율로 분배 */
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 비율 */
/* repeat() 함수로 반복 패턴 */
grid-template-columns: repeat(3, 1fr); /* 동일 3열 */
/* 자동 채우기: 최소 200px, 남는 공간 균등 분배 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 행 높이 지정 */
grid-template-rows: 80px auto 60px;
/* 간격 */
gap: 20px; /* 행·열 모두 */
row-gap: 20px; /* 행 간격만 */
column-gap: 16px; /* 열 간격만 */
}Grid 아이템 배치
css
/* 아이템의 위치를 라인 번호로 지정 */
.header {
grid-column: 1 / -1; /* 첫 번째 ~ 마지막 열 (전체 너비) */
grid-row: 1;
}
.sidebar {
grid-column: 1; /* 첫 번째 열 */
grid-row: 2 / 4; /* 두 번째 ~ 세 번째 행 */
}
.content {
grid-column: 2 / -1; /* 두 번째 열 ~ 끝 */
grid-row: 2;
}
/* span 키워드로 차지할 칸 수 지정 */
.featured {
grid-column: span 2; /* 2열 차지 */
grid-row: span 2; /* 2행 차지 */
}Grid Template Areas
grid-template-areas를 사용하면 레이아웃을 시각적으로 설계할 수 있습니다. 각 아이템에 이름을 붙이고, 그리드 영역을 문자열로 표현합니다.
css
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
min-height: 100vh;
gap: 16px;
}
/* 각 아이템에 영역 이름 지정 */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }카드 갤러리 만들기
css
/* 반응형 카드 갤러리 - Grid의 꽃 */
.card-gallery {
display: grid;
/* 최소 280px, 공간이 있으면 자동 확장 */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
padding: 24px;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card img {
width: 100%;
height: 200px;
object-fit: cover; /* 비율 유지하며 채우기 */
}
.card-body {
padding: 16px;
}💡
auto-fill은 빈 트랙도 공간을 차지하고, auto-fit은 빈 트랙을 축소합니다. 아이템 수가 가변적인 카드 레이아웃에는 auto-fill을, 아이템을 중앙에 모으고 싶을 때는 auto-fit을 사용하세요. Flexbox와 Grid를 함께 사용하면 거의 모든 레이아웃을 구현할 수 있습니다.