CSS Grid 레이아웃 마스터하기 — 실전 패턴 12가지

기본 그리드

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

자동 채우기

.auto-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

영역 이름 지정

.layout {
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

subgrid, container queries와 결합하면 더 유연한 레이아웃이 가능합니다.