Flexbox는 불가능하지만 CSS 그리드 레이아웃은 어떻게 동일한 높이 행을 달성할 수 있습니까?

CSS 그리드 레이아웃에서 동일한 높이 행 만들기

HTML 및 CSS 레이아웃 영역에서 동일한 높이 행을 얻는 것은 공통 도전. 전통적으로 Flexbox에서는 각 행이 가장 높은 요소에 의해 결정되는 라인 기반 높이 계산으로 인해 이것이 가능하지 않았습니다. 그러나 CSS 그리드 레이아웃의 출현은 이 문제에 대한 다양한 솔루션을 제공합니다.

해결책: 1fr 단위의 CSS 그리드 레이아웃

균일한 높이를 만드는 열쇠 그리드의 행은 Grid-auto-rows 속성에 1fr 단위를 활용하는 것입니다. 이 단위는 "분수 단위"를 나타내며 그리드 컨테이너 내의 유연한 길이를 나타냅니다.

<br>grid-auto-rows: 1fr;<br>

모든 행에 대해 Grid-auto-rows 속성을 1fr로 설정하여 브라우저에 사용 가능한 수직 공간을 균등하게 분배하도록 지시합니다. 결과적으로 모든 행의 높이가 동일해집니다.

작동 방식

1fr의 마법은 내부 콘텐츠에 따라 늘어나고 줄어들 수 있다는 것입니다. 그리드 셀. 동적 레이아웃에서 흔히 발생하는 것처럼 컨테이너의 높이가 무한정인 경우 가장 높은 콘텐츠를 수용할 수 있도록 그리드 트랙(이 경우 행)의 크기가 자동으로 조정됩니다.

행의 최대 높이는 다음과 같습니다. 1fr에 해당하는 값에 할당된 1fr 값을 곱하여 각 행의 최종 높이를 결정합니다. 본질적으로 모든 행은 가장 높은 행의 높이를 상속받습니다.

Flexbox가 실행 가능한 옵션이 아닌 이유

Grid 레이아웃과 달리 Flexbox는 방법을 제공하지 않습니다. 여러 줄에 걸쳐 동일한 높이의 행을 만듭니다. Flexbox 사양에 따라 각 줄의 교차 크기(높이)는 내용에 맞게 필요한 최소 높이로 제한됩니다.

이러한 동작으로 인해 Flexbox만으로는 원하는 효과를 얻을 수 없습니다. 오직 CSS 그리드 레이아웃만이 그리드의 모든 행에 걸쳐 동일한 높이의 행에 필요한 유연성과 기능을 제공합니다.

위 내용은 Flexbox는 불가능하지만 CSS 그리드 레이아웃은 어떻게 동일한 높이 행을 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!