칸 여러 개 차지하기

grid-column: span 2는 그 항목이 열 둘과 그 사이 간격을 함께 차지하게 하는 선언입니다. 부모가 그은 열 경계는 그대로 두고 커질 항목에만 쓰며, 나머지 항목은 HTML 차례대로 다음 빈 자리로 밀립니다.

레시피 목록에서 오늘의 추천 카드만 두 칸 넓게 보이고 싶을 때가 있습니다. 격자를 새로 짜지 않고 그 카드가 옆 칸까지 차지하게 하면 됩니다. 다만 넓어진 카드 때문에 뒤 카드들의 자리가 바뀌고, 열이 하나뿐인 좁은 격자에서는 보이지 않는 열이 생겨 칸이 어긋납니다. 이 레슨은 칸을 차지하는 셈과 뒤 항목이 놓이는 차례를 봅니다.

그림 준비 중

1커질 항목에 span 2

<div class="grid">
  <div class="wide">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

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

.grid div {
  background-color: #d2d2d7;
}

.wide {
  grid-column: span 2;
}

grid-column은 항목이 차지할 열을 정하는 CSS 속성이고, span 2는 '열 둘에 걸쳐'라는 뜻입니다. 이 선언은 부모가 아니라 커질 항목에 씁니다. 놓는 방식은 부모가 정하고, 자식은 그 안에서 차지할 칸(제 몫)만 정합니다(브라우저 규칙 7).

두 열을 차지한 너비에는 그 사이 간격도 듭니다. 열 하나가 89.33px이니 89.33 × 2 + 16, 약 194.7px입니다.

2나머지는 HTML 차례대로 다음 자리로

1절의 결과 화면에서 상자 여섯의 자리를 봅니다.

잰 값의 줄 수 3 · 6번의 왼쪽 자리 8px(첫째 열)이 이 표입니다. 상자는 여섯 그대로인데, 1번이 한 칸을 더 쓰면서 6번이 셋째 줄로 밀렸습니다. 격자는 HTML 차례대로 다음 빈 자리를 채웁니다 — 상자를 합치거나 내용을 옮기지 않습니다.

3열이 하나뿐이면 보이지 않는 열이 생긴다

앞 레슨의 카드 격자는 폭이 좁으면 한 열이 됩니다. 그 격자에 span 2를 남겨 두었습니다.

<div class="grid">
  <div class="wide">1</div>
  <div>2</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(260px, 1fr)
  );
  gap: 16px;
  width: 300px;
}

.wide {
  grid-column: span 2;
}

열은 하나뿐인데 1번이 둘을 달라고 해, 브라우저가 보이지 않는 둘째 열(0px)과 간격 16px을 더 만들었습니다. 1번은 300px, 2번은 16px 좁은 284px이라 오른쪽 끝이 어긋납니다. 잰 값 '열 수'는 보이는 상자가 놓인 열만 세어 1입니다. 숨은 열은 Computed 창의 grid-template-columns⁠에 284px 0px로 보입니다. 상자가 더 있으면 그 둘째 열에도 놓여, 아주 좁은 칸에 글이 눌립니다.

좁은 화면에서는 span 2를 풀어야 합니다 — 화면 폭에 따라 규칙을 바꾸는 법은 15단원 모바일 먼저와 미디어 쿼리에서 봅니다.

예제

오늘의 추천 떡볶이 카드를 두 칸으로 넓힙니다. 결과 화면을 펴기 전에, 잡채와 미역국 카드가 몇째 줄 몇째 열에 놓일지 적어 보세요.

<ul class="recipe-list">
  <li>김치볶음밥</li>
  <li>계란말이</li>
  <li>된장찌개</li>
  <li class="best">떡볶이</li>
  <li>잡채</li>
  <li>미역국</li>
</ul>

.recipe-list {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 16px;
  width: 272px;
  padding: 0;
  list-style: none;
}

.best {
  grid-column: span 2;
}

자주 틀리는 곳

틀린 생각: span 2를 부모에 쓰면 항목이 두 칸씩 차지한다.

열을 정하는 곳이 부모이니, 칸 수도 부모에 쓸 것 같습니다.

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  grid-column: span 2;
  gap: 16px;
  width: 300px;
}

선언은 닿았지만 상자는 89.33px 그대로입니다. grid-column은 그 요소가 부모 격자 안에서 차지할 칸이라, .grid의 부모(body)가 격자가 아니면 쓰이지 않습니다.

맞는 규칙: 차지할 칸은 커질 항목 자신에 씁니다.

틀린 생각: 두 칸을 차지하면 너비는 열 둘의 합이다.

열 100px 둘을 차지하면 200px일 것 같습니다.

<div class="grid">
  <div class="wide">1</div>
  <div>2</div>
  <div>3</div>
</div>

.grid {
  display: grid;
  grid-template-columns:
    100px 100px;
  gap: 20px;
}

.wide {
  grid-column: span 2;
}

두 열 사이의 간격 20px까지 차지해 220px입니다.

맞는 규칙: 걸친 열의 너비에 그 사이 간격을 더합니다.

틀린 생각: 빈 자리가 생기면 다음 항목이 메운다.

셋째 상자가 두 칸을 차지하면 첫 줄 셋째 칸이 비는데, 넷째 상자가 그 칸에 들어갈 것 같습니다.

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div class="wide">3</div>
  <div>4</div>
</div>

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

.grid div {
  height: 40px;
}

.wide {
  grid-column: span 2;
}

셋째 상자는 첫 줄 셋째 칸(한 칸)에 들지 않아 둘째 줄로 갔고, 넷째 상자는 그 뒤 자리(둘째 줄 셋째 열)로 갔습니다. 첫 줄 셋째 칸은 빈 채 남습니다.

맞는 규칙: 격자는 HTML 차례대로 앞으로만 채웁니다. 앞의 빈 자리를 뒤 항목으로 메우려면 부모에 grid-auto-flow: dense⁠를 씁니다 — 그러면 화면 차례가 HTML 차례와 달라지고, Tab 차례는 HTML 차례 그대로입니다.

확인 문제

1. 예제의 span 2를 span 3으로 바꿨습니다. 떡볶이 카드의 너비는 몇 px일까요?

<ul class="recipe-list">
  <li>김치볶음밥</li>
  <li>계란말이</li>
  <li>된장찌개</li>
  <li class="best">떡볶이</li>
  <li>잡채</li>
  <li>미역국</li>
</ul>

.recipe-list {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 16px;
  width: 272px;
  padding: 0;
  list-style: none;
}

.best {
  grid-column: span 3;
}

2. 추천 카드가 열 두 칸을 차지하게 하려 합니다. ____ 자리에 알맞은 값을 쓰세요.

.best {
  grid-column: ____;
}

.best {
  grid-column: span 2;
}

3. 여행 일정을 날짜마다 한 줄 머리로 놓았습니다. 결과 화면은 몇 줄일까요?

<ul class="trip">
  <li class="day">1일</li>
  <li>바다</li>
  <li>시장</li>
  <li class="day">2일</li>
  <li>박물관</li>
</ul>

.trip {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 8px;
  width: 280px;
  padding: 0;
  list-style: none;
}

.day {
  grid-column: span 3;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html의 body 안을 1절 HTML로, style 요소 안의 규칙을 1절 CSS로 바꿔 저장 · 새로고침합니다. class="wide"를 셋째 상자로 옮기면 첫 줄 셋째 칸이 비고, .grid 규칙에 grid-auto-flow: dense;⁠를 더하면 넷째 상자가 그 칸을 메웁니다. 개발자 도구 Elements 패널에서 .grid 줄 끝의 grid 표시를 누르면 빈 자리까지 격자 선으로 보입니다.