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

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

행 높이는 포함된 요소만 수용할 수 있으므로 Flexbox를 사용하여 동일한 높이의 행을 얻는 것은 비현실적입니다. 그러나 CSS Grid가 해결책을 제공합니다.

원리

같은 높이의 행으로 그리드를 생성하려면 모든 행을 그리드 자동 행으로 설정합니다. 1fr이 핵심입니다.

기술

Grid Layout의 fr 단위는 사용 가능한 공간에 따라 균등하게 공간을 할당합니다. 컨테이너 내의 여유 공간. 행(그리드-자동 행: 1fr)에 적용하면 모든 행은 해당 여유 공간의 동일한 부분을 차지합니다.

마법의 이유

그리드 레이아웃 사양에서는 유연한 크기(무한한 높이) 그리드, 그리드 트랙(행)은 콘텐츠의 높이를 채택합니다. 각 행에서 가장 높은 항목이 모든 행의 높이를 결정합니다. 이 최대 높이는 1fr의 길이가 되어 동일한 행 높이로 이어집니다.

Flexbox가 자르지 않는 이유

Flexbox는 동일한 행 내에서 동일한 높이 행만 허용하므로 크로스에 적합하지 않습니다. -행 균등화. Flexbox 사양에 따라 여러 줄 컨테이너에서 줄 높이는 Flex 항목을 수용하는 데 필요한 최소 높이에 따라 결정됩니다.

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