Flexbox가 실패하는 경우 CSS 그리드가 어떻게 동일한 높이 행을 달성할 수 있습니까?

CSS 그리드 레이아웃의 동일한 높이 행: 더 나은 방법

Flexbox는 모든 행에 걸쳐 동일한 높이 행을 수용할 수 없지만 CSS Grid는 솔루션을 제공합니다. fr 단위를 활용하면 이 효과를 쉽게 얻을 수 있습니다.

그리드 레이아웃의 마법이 일어나는 방식

CSS 그리드 레이아웃에서 fr 단위는 그리드 컨테이너 내의 여유 공간을 분배하는 유연한 길이를 나타냅니다. . 모든 행을 1fr로 설정하면 동일한 높이의 행으로 변환됩니다.

그러나 마법은 fr의 정의에 있습니다. 그리드 컨테이너의 높이가 무한한 경우 fr 트랙(이 경우 행)은 콘텐츠 높이에 맞춰 조정됩니다.

그리드에서 가장 높은 콘텐츠가 최대 콘텐츠 높이를 결정하며, 이는 1fr의 길이가 됩니다. 따라서 1fr은 그리드에서 가장 높은 "셀"의 높이를 미러링하여 자동으로 동일한 높이 행을 생성합니다.

Flexbox가 짧은 이유

Flexbox는 동일한 줄의 동일한 높이 행에 유용합니다. , 여러 줄에 걸쳐 흔들립니다. Flexbox 사양에 따라 각 줄의 높이는 해당 줄의 Flex 항목을 수용하는 데만 충분합니다. 이러한 제한으로 인해 행 전체에 걸쳐 동일한 높이의 행이 방지됩니다.

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