한 줄 요약 — grid-template-areas는 각 칸에 이름을 붙여 레이아웃을 글자 그림으로 그리고, grid-area로 요소를 그 이름 자리에 앉힌다. repeat(auto-fit, minmax(200px, 1fr)) 한 줄이면 화면 폭에 맞춰 카드가 알아서 줄바꿈되는 반응형 격자가 된다. auto-fit과 auto-fill의 차이, minmax()로 최소 폭을 지키는 법까지 익힌다.

학습 목표#

  • grid-template-areas와 grid-area로 영역에 이름을 붙여 배치할 수 있다.
  • repeat(auto-fit, …)로 칸 개수를 화면 폭에 맡길 수 있다.
  • minmax()가 칸의 최소·최대 폭을 어떻게 지키는지 안다.
  • auto-fit과 auto-fill이 빈 칸을 다루는 방식의 차이를 설명할 수 있다.

오늘의 비유 — 신문 1면의 영역에 이름표를 붙여 배치하는 일#

신문 편집자는 1면을 짤 때 사진을 먼저 늘어놓지 않는다. "여기 맨 위는 제호(신문 이름), 그 아래 왼쪽은 헤드라인, 오른쪽 세로 칸은 광고, 아래는 본기사" 하고 자리부터 정한다. 그래야 어떤 기사가 들어와도 1면의 인상이 흔들리지 않는다.

grid-template-areas가 바로 이 편집자의 배치표다. 칸마다 masthead(제호)·headline·article·ad 같은 이름을 붙여 두면, 기사 요소는 자기 이름이 적힌 자리에 가서 앉는다. 지난 회차에서 모눈종이에 줄만 그었다면, 오늘은 그 칸들에 이름표를 달아 1면 지면을 통째로 설계한다.

핵심 개념#

grid-template-areas — 칸에 이름을 붙인다#

먼저 컨테이너에서 열의 개수를 정하고, 각 행을 따옴표로 묶은 글자 그림으로 배치를 그린다. 같은 이름을 옆으로 이어 쓰면 그 칸들이 하나로 합쳐진다.

.page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "masthead masthead masthead"
    "headline headline ad"
    "article  article  ad";
}

그림을 보면 맨 윗줄은 제호가 세 칸을 통째로 차지하고, 광고(ad)는 오른쪽에서 두 행에 걸쳐 세로로 이어진다. 이름을 어떻게 적느냐가 곧 지면이 된다.

grid-area — 요소를 이름 자리에 앉힌다#

이제 각 요소에 어느 이름 자리에 들어갈지 알려 준다.

.masthead { grid-area: masthead; }
.headline { grid-area: headline; }
.article  { grid-area: article; }
.ad       { grid-area: ad; }

HTML에서 순서가 어떻든 화면에서는 배치표가 정한 자리에 놓인다. 광고 칸을 1면 아래로 옮기고 싶으면 마크업은 그대로 두고 grid-template-areas의 글자만 바꾸면 된다.

repeat(auto-fit, minmax()) — 칸 개수를 화면에 맡긴다#

1면 영역을 손으로 짜는 것과 달리, 같은 크기의 카드를 여러 장 깔 때는 칸 개수를 일일이 정하기 번거롭다. 이럴 때 auto-fit이 화면 폭에 맞는 만큼 칸을 알아서 만든다.

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

minmax(200px, 1fr)은 "칸은 최소 200px, 남으면 1fr까지 늘어난다"는 뜻이다. 넓은 화면이면 한 줄에 카드가 여러 장, 좁아지면 자동으로 아래로 줄바꿈된다. repeat auto fit minmax 한 줄이 미디어 쿼리 없이도 반응형을 만들어 준다.

함께 따라하기 — 자동 줄바꿈 카드 그리드#

같은 카드 6장을 깔고 브라우저 폭을 줄여 본다.

<section class="cards">
  <article class="card">기사 1</article>
  <article class="card">기사 2</article>
  <article class="card">기사 3</article>
  <!-- 같은 식으로 6장까지 -->
</section>

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.card {
  padding: 24px;
  background: #f4f4f5;
  border-radius: 8px;
}

저장하고 열어 보면 넓은 화면에서는 카드가 한 줄에 서너 장씩 놓이고, 창을 좁히면 칸 폭이 200px 밑으로 내려가기 직전에 한 장씩 아래로 내려간다. 모바일 폭에서는 결국 한 줄에 한 장이 된다. 미디어 쿼리를 한 줄도 안 썼는데 신문이 판형에 맞춰 단을 줄이듯 카드가 알아서 단을 바꾼다.

흔한 실수 3가지#

1. auto-fit과 auto-fill의 차이를 모른 채 둘 다 써 본다#

이름이 비슷해 아무거나 넣고 결과가 달라 헷갈리는 경우다. 차이는 칸이 남을 때 드러난다.

/* (카드가 2장뿐인데 오른쪽에 빈 칸이 그대로 남습니다) */
.cards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

auto-fill은 화면에 들어갈 만큼 칸을 다 만들어 두고, 내용이 없는 칸은 빈 자리로 남긴다. 카드 2장이면 나머지 빈 칸이 지면을 차지해 카드가 안 늘어난다. auto-fit은 내용 없는 칸을 접어 버려 남은 폭을 카드들이 나눠 가진다.

.cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

대부분의 카드 목록에서는 빈 칸 없이 꽉 채우는 auto-fit이 무난하다. 칸 자리를 일부러 비워 두고 싶을 때만 auto-fill을 쓴다.

2. minmax 없이 칸 수를 박아 두고 좁은 화면에서 찌그러진다#

칸 개수를 숫자로 고정하면 모바일에서도 그 개수를 고집해 카드가 좁게 눌린다.

/* (모바일에서도 3칸을 고집해 카드가 좁게 찌그러집니다) */
.cards {
  grid-template-columns: repeat(3, 1fr);
}

1fr은 화면이 좁아져도 칸 수를 줄이지 않고 폭만 깎는다. minmax(200px, 1fr)로 최소 폭을 정해 두면 200px보다 좁아지기 전에 칸 수가 먼저 줄어든다. 신문이 지면이 좁아지면 단 수를 줄이지, 글자를 무한정 좁히지 않는 것과 같다.

.cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

3. template-areas의 따옴표를 한 행씩 쓰지 않는다#

grid-template-areas는 따옴표 하나가 한 행이다. 여러 행을 한 따옴표에 몰아 쓰면 행 구분이 사라진다.

/* (한 줄로 몰아 써서 모든 칸이 한 행이 됩니다) */
.page {
  grid-template-areas: "masthead headline ad article";
}

행마다 따옴표를 따로 두고, 모든 행의 칸(이름) 개수가 열 개수와 같아야 한다. 또 같은 이름은 직사각형으로만 이어질 수 있다 — L자 모양으로는 묶이지 않는다.

.page {
  grid-template-areas:
    "masthead masthead masthead"
    "headline headline ad";
}

오늘 배운 것 체크리스트#

  • grid-template-areas는 따옴표 한 줄이 한 행이고, 같은 이름은 직사각형으로 합쳐진다.
  • grid-area: 이름으로 요소를 배치표의 자리에 앉힌다.
  • repeat(auto-fit, minmax(200px, 1fr))는 미디어 쿼리 없이 카드를 자동 줄바꿈한다.
  • minmax(최소, 최대)로 칸이 너무 좁아지는 것을 막는다.
  • 빈 칸을 접으면 auto-fit, 빈 칸을 남기면 auto-fill.

자주 묻는 질문#

Q. grid-template-areas는 어떻게 쓰나요?

A. 컨테이너에서 grid-template-columns로 열 개수를 정한 뒤, 각 행을 따옴표로 묶어 칸 이름을 적습니다. 같은 이름을 옆이나 아래로 이어 쓰면 그 칸들이 하나로 합쳐집니다. 그다음 각 요소에 grid-area: 이름을 주면 그 자리에 놓입니다. 모든 행의 이름 개수는 열 개수와 같아야 합니다.

Q. repeat(auto-fit, minmax(200px, 1fr))는 정확히 무슨 뜻인가요?

A. "최소 200px, 최대 1fr인 칸을 화면에 들어갈 만큼 반복해서 만들라"는 뜻입니다. 넓으면 칸을 여러 개 만들고, 좁아지면 200px 밑으로 내려가기 전에 칸 수를 줄여 아래로 줄바꿈합니다. auto-fit은 남는 빈 칸을 접어 카드들이 폭을 나눠 갖게 합니다.

Q. 카드가 화면 폭에 따라 자동으로 줄바꿈되게 하려면 어떻게 하나요?

A. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 한 줄이면 됩니다. minmax의 첫 값(여기선 200px)이 카드의 최소 폭이고, 화면이 그보다 좁아지면 칸 수가 자동으로 줄어듭니다. gap으로 카드 사이 간격만 더 주면 됩니다.

다음 시간 예고#

내일은 반응형 디자인 — 미디어 쿼리와 모바일 퍼스트 사고를 다룬다. 오늘은 auto-fit으로 미디어 쿼리 없이 반응형을 만들었다면, 다음 시간엔 화면 폭마다 디자인을 바꿔야 할 때 쓰는 미디어 쿼리를 모바일부터 쌓아 올리는 법을 배운다.

더 알아보기#