CSS 그리드 레이아웃의 동일한 높이 행

CSS 그리드 레이아웃의 동일한 높이 행

각 행은 요소를 맞추는 데 필요한 최소 높이만 될 수 있기 때문에 Flexbox를 사용하는 것은 불가능하다고 생각합니다. 하지만 최신 CSS 그리드를 사용하면 이를 달성할 수 있습니까?

각 행뿐만 아니라 모든 행에 걸쳐 그리드의 모든 요소에 대해 동일한 높이를 원합니다.기본적으로, 가장 높은 "셀"은 행에 있는 셀뿐만 아니라 모든 셀의 높이를 지시해야 합니다.

단답형

그리드에서 가장 높은 셀이 모든 행의 높이를 설정하는 높이가 동일한 그리드를 만드는 것이 목표라면 다음과 같은 빠르고 간단한 솔루션이 있습니다.

• 컨테이너를 다음으로 설정합니다.grid-auto-rows: 1fr

---

작동 방식

그리드 레이아웃은 그리드 컨테이너에서 유연한 길이를 설정하기 위한 단위를 제공합니다.여기가 유닛입니다.이는 용기에 여유 공간을 분배하도록 설계되었으며 약간 유사합니다.flex-grow속성을 입력합니다.

그리드 컨테이너의 모든 행을 다음으로 설정하는 경우1fr이렇게 말하죠.

grid-auto-rows: 1fr;

그러면 모든 행의 높이가 동일합니다.

fr사용 가능한 공간을 분배해야 합니다.또한 여러 행에 서로 다른 높이의 콘텐츠가 있는 경우 공간이 분산되면 일부 행은 비례적으로 더 작고 더 높아집니다.

단, 그리드 사양의 깊은 곳에 묻혀 있는 작은 덩어리는 다음과 같습니다.

한 길이:7.2.3. 유연한 길이:fr구성 단위

...

), 사이즈flex-size),fr) 그리드 트랙은 각각의 비율을 유지하면서 내용물에 맞게 크기가 조정됩니다.

각 플렉스 크기 그리드 트랙의 사용된 크기는 다음을 결정하여 계산됩니다.max-content 플렉스 및 각"가상의 나"를 합니다.1frsize.

중 된 " 중최값값사으용다니됩로이된"로 됩니다.1fr길이(플렉스 분율). 각 그리드 트랙의 플렉스 계수를 곱하여 최종 크기를 결정합니다.

따라서, 제가 이것을 올바르게 읽고 있다면, 동적으로 크기가 지정된 그리드(예: 높이가 무한함)를 다룰 때, 그리드 트랙(이 경우, 행)은 내용에 맞게 크기가 지정됩니다.

각 행의 높이는 가장 max-content높은() 그리드 항목에 의해 결정됩니다.

해당 행의 최대 높이는 다음 길이가 됩니다.1fr.

그런 식으로1fr그리드 컨테이너에 동일한 높이의 행을 만듭니다.

---

Flexbox가 옵션이 아닌 이유

질문에서 언급한 것처럼, Flexbox에서는 동일한 높이의 행을 사용할 수 없습니다.

유연한 항목은 동일한 행에서 높이가 같을 수 있지만 여러 행에 걸쳐 있을 수는 없습니다.

이 동작은 Flexbox 사양에 정의되어 있습니다.

플렉스 라인

다중 라인 플렉스 용기에서 각 라인의 교차 크기는 라인에 플렉스 항목을 포함하는 데 필요한 최소 크기입니다.

즉, 행 기반 플렉스 컨테이너에 여러 줄이 있는 경우 각 줄의 높이("교차 크기")는 줄의 플렉스 항목을 포함하는 데 필요한 최소 높이입니다.

간단한 대답은 그 설정입니다.grid-auto-rows: 1fr;그리드 컨테이너에서 요청한 것을 해결합니다.

* {
  box-sizing: border-box;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.description {
  background: blue;
  grid-column: 1 / span 4;
}

.col {
  background: red;
}

<div class="container">
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

코드펜에서 보기

언급URL : https://stackoverflow.com/questions/44488357/equal-height-rows-in-css-grid-layout