CSS 그리드에서 행 병합

그리드의 행과 열은 격자를 형성합니다. 요소가 격자 셀 하나가 아닌 여러 개를 차하도록 만들 수 있습니다.

요소가 하나 이상의 행을 차하도록 하려면 grid-row 속성을 설정해야 합니다. 이 속성에는 슬래시로 구분된 숫자를 지정하여 그리드 내 요소의 시작 위치와 끝 위치를 나타냅니다.

이때 요소는 첫 번째 위치에서 두 번째 위치까지 (두 번째 위치는 제외하고) 확장됩니다. 즉, 값 1 / 2는 요소가 첫 번째 셀 하나만 차지하게 하고, 값 1 / 3는 요소가 첫 번째와 두 번째 셀을 차지하게 합니다 (세 번째 셀은 제외).

예시

세 개의 자식 요소를 가진 그리드가 있다고 가정해 봅시다. 첫 번째 요소가 두 개의 행을 차지하도록 배치해 보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3; /* 두 행 */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
}

Результат:

예시

이제 네 번째 블록에 세 개의 행을 할당해 보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
}
#elem4 {
  grid-row: 1 / 4;
}

Результат:

실습 과제