CSS 그리드의 행 수와 너비

그리드 요소는 행을 따라 배치할 수도 있습니다. 이를 위한 속성은 grid-template-rows입니다. 이 속성은 공백으로 구분하여 행의 크기를 받습니다. 열에서 배운 것과 동일한 값을 사용할 수 있습니다.

예제

예를 들어, 블록을 네 개의 행에 배치해 봅시다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

예제

첫 번째와 세 번째 행에는 픽셀 단위의 고정 너비를 지정하고, 두 번째 행은 남은 공간을 차지하도록 합시다:

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

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

예제

행 크기를 지정하기 위해 repeat 함수를 사용합시다:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

예제

행 높이를 50px로 설정하고, 값 auto-fill을 사용하여 행 수를 자동으로 지정합시다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

실습 과제