각 행은 요소를 맞추는 데 필요한 최소 높이 일 수 있기 때문에 Flexbox를 사용하여 달성하는 것은 불가능하다고 생각하지만 최신 CSS 그리드를 사용하여 달성 할 수 있습니까?
명확하게 말하면, 각 행이 아닌 모든 행에서 그리드의 모든 요소에 대해 동일한 높이를 원합니다. 기본적으로 가장 높은 "셀"은 행의 셀뿐만 아니라 모든 셀의 높이를 지정해야합니다.
답변:
목표가 동일한 높이 행으로 그리드를 만드는 것인데, 그리드에서 가장 높은 셀이 모든 행의 높이를 설정하는 경우 다음과 같은 빠르고 간단한 솔루션이 있습니다.
grid-auto-rows: 1fr그리드 레이아웃은 그리드 컨테이너에서 유연한 길이를 설정하기위한 단위를 제공합니다. 이것은 fr단위입니다. 컨테이너의 여유 공간을 분배하도록 설계 flex-grow되었으며 flexbox 의 속성 과 다소 유사합니다 .
그리드 컨테이너의 모든 행을로 설정하면 다음 1fr과 같이 가정 해 보겠습니다.
grid-auto-rows: 1fr;... 그러면 모든 행이 같은 높이가됩니다.
fr여유 공간을 배포해야하기 때문에 실제로는 의미가 없습니다 . 여러 행에 높이가 다른 콘텐츠가있는 경우 공간이 분산 될 때 일부 행은 비례 적으로 더 작고 더 커집니다.
제외하고 , 그리드 사양에 깊이 묻혀있는 것은 다음과 같습니다.
...
사용 가능한 공간이 무한 할 때 (그리드 컨테이너의 너비 또는 높이가 무한 할 때 발생 함), 플렉스 크기 (
fr) 그리드 트랙은 각각의 비율을 유지하면서 내용에 맞게 크기가 조정됩니다.각 플렉스 크기 그리드 트랙의 사용 된 크기는 각 플렉스 크기 그리드 트랙의
max-content크기를 결정하고 해당 크기를 각각의 플렉스 팩터로 나누어 "가상1fr크기" 를 결정하여 계산됩니다 .이들의 최대 값은 해결 된
1fr길이 (플렉스 비율) 로 사용되며, 각 그리드 트랙의 플렉스 팩터를 곱하여 최종 크기를 결정합니다.
따라서이 내용을 올바르게 읽고 있다면 동적 크기의 격자 (예 : 높이가 무한대)를 다룰 때 격자 트랙 (이 경우 행)이 내용에 맞게 크기가 조정됩니다.
각 행의 높이는 가장 높은 ( max-content) 그리드 항목에 의해 결정됩니다 .
이러한 행의 최대 높이는의 길이가 1fr됩니다.
이것이 1fr그리드 컨테이너에서 동일한 높이의 행을 만드는 방법 입니다.
질문에서 언급했듯이 flexbox에서는 동일한 높이의 행을 사용할 수 없습니다.
Flex 항목은 동일한 행에서 높이가 같을 수 있지만 여러 행에 걸쳐있을 수는 없습니다.
이 동작은 flexbox 사양에 정의되어 있습니다.
여러 줄 플렉스 컨테이너에서 각 줄의 교차 크기는 줄에 플렉스 항목을 포함하는 데 필요한 최소 크기입니다.
즉, 행 기반 플렉스 컨테이너에 여러 줄이있는 경우 각 줄의 높이 ( "십자 크기")는 줄에 플렉스 항목을 포함하는 데 필요한 최소 높이입니다.
짧은 대답은 grid-auto-rows: 1fr;그리드 컨테이너의 설정 이 요청 된 내용을 해결 한다는 것입니다.
grid-auto-row해당 행의 크기가 2 인 경우 첫 번째 행의 1fr 크기가 50px와 같음을 의미합니까?