CSS Grid로 카드형 레이아웃 만들기

안녕하세요. 이코노트허브 입니다.

블로그 하단이나 사이드바에서 "관련 글" 섹션이 카드 형태로 반듯하게 정렬된 걸 보신 적 있으실 겁니다. 이런 격자(그리드) 형태의 레이아웃은 예전엔 만들기 까다로웠지만, CSS Grid가 나온 뒤로는 몇 줄이면 충분합니다.

[Grid, 언제 쓰면 좋을까요?]

지난번 다뤘던 flex는 한 줄(가로 또는 세로)을 정렬할 때 강력합니다. 반면 grid는 가로와 세로를 동시에 격자처럼 배치해야 할 때 훨씬 편합니다. 카드 3개를 나란히, 그리고 여러 줄로 자동 배치하고 싶다면 grid가 정답입니다.

[기본 문법]

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

하나씩 뜯어보겠습니다.

display: grid: 이 요소를 격자 배치로 만들겠다는 선언입니다.
grid-template-columns: repeat(3, 1fr): 열을 3개 만들고, 각 열의 너비를 동일한 비율(1fr)로 나눈다는 뜻입니다. "3개씩 나란히"를 이 한 줄로 표현합니다.
gap: 16px: 카드 사이의 간격입니다. 예전처럼 마진을 각 카드에 따로 줄 필요가 없습니다.

[실전 예제: 관련 글 카드]

<div class="card-container">
  <div class="card">
    <img src="이미지주소.jpg" alt="글 제목">
    <h3>글 제목 1</h3>
  </div>
  <div class="card">
    <img src="이미지주소.jpg" alt="글 제목">
    <h3>글 제목 2</h3>
  </div>
  <div class="card">
    <img src="이미지주소.jpg" alt="글 제목">
    <h3>글 제목 3</h3>
  </div>
</div>

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

카드 3개를 감싸는 부모에 card-container 클래스를, 각 카드에 card 클래스를 지정하면 자동으로 3열 격자로 정렬됩니다.

[모바일에서는 열 개수 줄이기]

지난번 배운 미디어 쿼리를 그대로 활용합니다. PC에서는 3열이지만, 스마트폰처럼 화면이 좁을 땐 1열로 바꿔주는 게 훨씬 보기 좋습니다.

@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

grid-template-columns: 1fr은 열이 1개, 즉 세로로 쭉 나열된다는 뜻입니다.

[더 똑똑한 방법: 자동으로 열 개수 조절하기]

화면 크기별로 미디어 쿼리를 여러 번 쓰는 대신, 아래처럼 하면 화면 크기에 따라 카드 개수가 자동으로 조절됩니다.

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

auto-fit과 minmax(200px, 1fr)의 조합은 "카드 하나의 최소 너비는 200px로 유지하면서, 한 줄에 들어갈 수 있는 만큼 알아서 채워라"는 뜻입니다. 화면이 넓으면 카드가 4~5개까지 늘어나고, 좁으면 자동으로 1~2개로 줄어듭니다. 미디어 쿼리 없이도 반응형이 해결되는 경우가 많아 실무에서 자주 씁니다.

[초보자가 자주 하는 실수 2가지]

margin으로 간격을 주다가 정렬이 틀어지는 경우: 각 카드에 margin을 따로 주면 양 끝 카드만 간격이 안 맞는 문제가 생깁니다. gap 속성을 쓰면 이런 계산을 할 필요 없이 부모 요소에서 한 번에 해결됩니다.
이미지 비율이 카드마다 다른 경우: 원본 이미지 크기가 제각각이면 카드 높이가 들쭉날쭉해 보일 수 있습니다. img에 width: 100%; height: auto;를 기본으로 걸어두면 가로 폭에 맞춰 비율이 자동으로 조정됩니다.

핵심 요약

한 줄 정렬은 flex, 격자(행+열) 정렬은 grid가 더 적합합니다.
grid-template-columns: repeat(개수, 1fr)로 열 개수를 지정하고, gap으로 간격을 줍니다.
repeat(auto-fit, minmax(최소너비, 1fr))을 쓰면 미디어 쿼리 없이도 화면 크기에 맞춰 열 개수가 자동 조절됩니다.
카드 간격은 margin보다 gap을 쓰는 게 훨씬 깔끔합니다.

지금 블로그 하단에 "관련 글"이나 "추천 글" 섹션이 줄글로만 나열되어 있다면, 이번 카드형 레이아웃 한번 적용해보시는 걸 추천드립니다. 방문자가 훨씬 더 많은 글을 자연스럽게 클릭하게 될 거예요.