Grid(갤러리 모양 만들기)

카드 목록을 격자(갤러리)로 만들고 싶다

열 개수 바꾸기

grid-template-columns로 열 수를 조절합니다.

HTML

<div class="gallery">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

CSS

/* 1. Grid 컨테이너 선언 */
.gallery {
  display: grid;

  /* 2. 열 개수 지정 */
  grid-template-columns: repeat(3, 1fr);
}

열 개수: 3열

열 개수

gap 값으로 카드 간격을 조절합니다.

HTML

<div class="gallery">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

CSS

/* 1. Grid 간격 지정 */
.gallery {
  display: grid;
  gap: 8px;
}

카드 간격: 8px

카드 간격

grid-column: span N 으로 특정 카드를 더 크게 만듭니다.

HTML

<div class="gallery">
  <!-- 대표 카드 -->
  <div class="card featured">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

CSS

/* 1. featured 카드가 여러 열 차지 */
.featured {
  grid-column: span 2;
}

대표 카드 폭: span 2

대표 카드 폭

auto-fit + minmax 패턴으로 폭에 따라 자동 열 배치를 만듭니다.

HTML

<div class="gallery">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

CSS

/* 1. 폭이 충분하면 열 증가 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

최소 카드 폭: 140px

최소 카드 폭