CSS 그리드는 Flexbox와 달리 어떻게 동일한 높이의 행을 얻을 수 있나요?

CSS 그리드 레이아웃의 동일한 높이 행: 자세한 설명

Flexbox와 달리 행 높이는 필요한 최소 높이에 따라 결정됩니다. 해당 요소의 경우 CSS 그리드 레이아웃은 개발자가 전체 요소에 걸쳐 동일한 높이의 행을 달성할 수 있도록 지원합니다. Grid.

그리드 레이아웃 솔루션

동일한 높이를 달성하는 열쇠는 그리드 컨테이너의 Grid-auto-rows 속성을 1fr로 설정하는 데 있습니다. Fr 단위는 Flexbox의 flex-grow 속성과 유사하게 컨테이너의 여유 공간을 분배하도록 설계되었습니다.

grid-auto-rows: 1fr을 설정하면 그리드 내의 모든 행의 높이가 동일해집니다. fr은 공간을 동적으로 할당해야 하기 때문에 직관에 어긋나는 것처럼 보일 수 있습니다.

Fr 단위 이해

그러나 CSS 그리드 사양은 동적 그리드 크기를 처리할 때 중요한 뉘앙스를 드러냅니다. , "그리드 트랙"(이 경우 행)은 내용에 맞게 크기가 조정됩니다. 그런 다음 각 행의 높이는 가장 높은(최대 콘텐츠) 그리드 항목에 맞춰집니다.

이 행의 최대 높이는 1fr의 길이가 되며, 여기에 각 그리드 트랙의 플렉스 인수를 곱하여 최종 항목을 결정합니다. 크기. 이 메커니즘은 모든 행에서 동일한 높이를 보장합니다.

Flexbox가 짧은 이유

Flexbox는 CSS Grid와 달리 여러 행에서 동일한 행 높이를 구현할 수 없습니다. Flex 항목은 Flexbox 사양에 따라 동일한 행 내에서만 동일한 높이를 달성할 수 있습니다.

"다중 줄 Flex 컨테이너에서 각 줄의 교차 크기는 Flex 항목을 포함하는 데 필요한 최소 크기입니다. 선." 이 규정은 Flexbox가 최소 높이 이상으로 행을 확장하는 것을 방지합니다.

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