Grid 레이아웃

1. Grid vs Flexbox — 언제 무엇을 쓰나

구분	Flexbox	Grid
차원	1차원 (가로 또는 세로)	2차원 (가로 + 세로 동시)
적합한 케이스	네비게이션, 버튼 그룹, 카드 한 줄 나열	전체 페이지 레이아웃, 카드 격자, 대시보드
콘텐츠 주도	콘텐츠 크기에 맞게 유연	컨테이너 기준으로 균일한 격자

실무에서는 두 가지를 함께 사용합니다. 전체 페이지는 Grid, 각 컴포넌트 내부는 Flexbox가 자연스럽습니다.

2. Grid 기본 설정

.container {
  display: grid;

  /* 열(column) 정의 */
  grid-template-columns: 200px 200px 200px;  /* 3열 각 200px */
  grid-template-columns: 1fr 1fr 1fr;         /* 3열 동일 비율 */
  grid-template-columns: repeat(3, 1fr);      /* 위와 동일 (단축) */
  grid-template-columns: 200px 1fr;           /* 왼쪽 고정, 오른쪽 유동 */
  grid-template-columns: repeat(4, minmax(150px, 1fr)); /* 최소 150px */

  /* 행(row) 정의 */
  grid-template-rows: 80px 1fr 60px;  /* 헤더 고정 / 콘텐츠 / 푸터 고정 */

  /* 간격 */
  gap: 20px;
  column-gap: 24px;
  row-gap: 16px;
}

/* fr 단위: 남은 공간을 비율로 나눔 */
grid-template-columns: 1fr 2fr 1fr;
/* 전체를 4등분 → 1:2:1 비율 */

3. 아이템 배치 — 셀 병합

/* 그리드 라인 번호로 위치 지정 */
.item-a {
  grid-column: 1 / 3;    /* 1번 라인 ~ 3번 라인 (2열 차지) */
  grid-row: 1 / 2;       /* 1번 라인 ~ 2번 라인 (1행 차지) */
}

/* span 키워드로 병합 */
.item-b {
  grid-column: span 2;   /* 2열 병합 */
  grid-row: span 3;      /* 3행 병합 */
}

/* 단축형 */
.item-c {
  grid-area: 1 / 1 / 3 / 4;  /* row-start / col-start / row-end / col-end */
}

/* 이름 있는 템플릿 영역 */
.container {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 50px;
}
header  { grid-area: header;  }
aside   { grid-area: sidebar; }
main    { grid-area: content; }
footer  { grid-area: footer;  }

4. auto-fill vs auto-fit — 반응형 자동 그리드

/* auto-fill: 빈 셀 유지 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

/* auto-fit: 빈 셀 없이 늘려 채움 (보통 이쪽이 더 자연스러움) */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

/* 해석:
   - 최소 250px을 유지
   - 공간이 허락하면 1fr씩 차지
   - 화면이 넓으면 많은 열, 좁으면 자동으로 적은 열
   → 미디어쿼리 없이 반응형 카드 그리드 완성! */

5. 실전 예제 — 블로그 카드 그리드

<div class="card-grid">
  <article class="card">
    <img src="thumb1.jpg" alt="썸네일">
    <div class="card-body">
      <h3>카드 제목</h3>
      <p>카드 설명 텍스트입니다.</p>
    </div>
  </article>
  <!-- 카드 반복 -->
</div>

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 32px;
}

.card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card img { width: 100%; height: 180px; object-fit: cover; }
.card-body { padding: 16px; }

6. Grid 정렬 — justify-items, align-items

.container {
  /* 모든 아이템의 셀 내 가로 정렬 */
  justify-items: start | center | end | stretch(기본);

  /* 모든 아이템의 셀 내 세로 정렬 */
  align-items: start | center | end | stretch(기본);

  /* 그리드 전체의 컨테이너 내 가로 정렬 */
  justify-content: center;

  /* 그리드 전체의 컨테이너 내 세로 정렬 */
  align-content: center;
}

/* 개별 아이템만 */
.item { justify-self: end; align-self: center; }

관련 검색어  ·  CSS Grid, grid-template-columns, fr단위, auto-fit minmax, grid-area, CSS레이아웃, 반응형그리드