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

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

---

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

명확하게 말하면, 각 행이 아닌 모든 행에서 그리드의 모든 요소에 대해 동일한 높이를 원합니다. 기본적으로 가장 높은 "셀"은 행의 셀뿐만 아니라 모든 셀의 높이를 지정해야합니다.

---

짧은 답변

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

• 컨테이너를 grid-auto-rows: 1fr

---

작동 원리

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

그리드 컨테이너의 모든 행을로 설정하면 다음 1fr과 같이 가정 해 보겠습니다.

grid-auto-rows: 1fr;

... 그러면 모든 행이 같은 높이가됩니다.

fr여유 공간을 배포해야하기 때문에 실제로는 의미가 없습니다 . 여러 행에 높이가 다른 콘텐츠가있는 경우 공간이 분산 될 때 일부 행은 비례 적으로 더 작고 더 커집니다.

제외하고 , 그리드 사양에 깊숙이 묻혀있는 것은 다음과 같습니다.

7.2.3. 유연한 길이 : fr단위

...

사용 가능한 공간이 무한 할 때 (그리드 컨테이너의 너비 또는 높이가 무한 할 때 발생), 플렉스 크기 ( fr) 그리드 트랙은 각각의 비율을 유지하면서 내용에 맞게 크기가 조정됩니다.

각 플렉스 크기 그리드 트랙의 사용 된 크기는 각 플렉스 크기 그리드 트랙의 max-content크기를 결정하고 해당 크기를 각각의 플렉스 팩터로 나누어 "가상 1fr크기" 를 결정함으로써 계산됩니다 .

이들의 최대 값은 해결 된 1fr길이 (플렉스 비율) 로 사용되며, 각 그리드 트랙의 플렉스 팩터를 곱하여 최종 크기를 결정합니다.

따라서이 내용을 올바르게 읽고 있다면 동적 크기의 격자 (예 : 높이가 무한대)를 다룰 때 격자 트랙 (이 경우 행)이 내용에 맞게 크기가 조정됩니다.

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

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

이것이 1fr그리드 컨테이너에서 동일한 높이의 행을 만드는 방법 입니다.

---

Flexbox가 옵션이 아닌 이유

질문에서 언급했듯이 flexbox에서는 동일한 높이의 행을 사용할 수 없습니다.

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

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

6. 플렉스 라인

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

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

---

짧은 대답은 grid-auto-rows: 1fr;그리드 컨테이너의 설정 이 요청 된 내용을 해결 한다는 것입니다.

https://codepen.io/Hlsg/pen/EXKJba

---

당신은에 대한 백분율을 사용하여 grid-template-rows같은를

grid-template-rows: 50% 50%;

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