CSS 그리드 행을 중첩 그리드의 콘텐츠 높이에 맞게 조정하는 방법은 무엇입니까?

CSS 그리드 - 내용에 맞게 행 높이 조정: 자동 높이에 대한 Max-Content

중첩된 CSS 그리드로 작업할 때 외부 높이가 그리드 행은 내용의 크기에 이상적으로 조정되어야 하는 경우에도 내부 그리드 행에 영향을 미칩니다. 이러한 경우 원하는 동작을 달성하는 열쇠는 CSS 속성인 Grid-auto-rows를 사용하는 것입니다.

중첩된 CSS 그리드 및 행 높이 전파

제공된 코드 스니펫에는 두 개의 그리드 컨테이너(div 및 .grid-2)가 상위 그리드 컨테이너(grid-1) 내에 수평으로 배열됩니다. 각 그리드의 열은 그리드 템플릿 열을 사용하여 정의되며 행의 자동 배치는 그리드 자동 행에 의해 제어됩니다.

기본적으로 .grid-2 컨테이너는 그리드 자동 행을 설정합니다. 행을 자동으로 설정합니다. 즉, 행이 내용에 맞게 조정됩니다. 그러나 내부 그리드 컨테이너 .grid-3에서 문제가 발생합니다. Grid-auto-rows도 자동으로 설정되어 있더라도 중첩된 그리드의 행 높이는 외부 그리드의 행에 영향을 받습니다. 이로 인해 .grid-2 컨테이너의 더 큰 쪽이 높이를 .grid-3 컨테이너에 전파하여 두 그리드 전체에서 일관된 행 높이가 생성됩니다.

그리드 행을 '최대 콘텐츠'로 설정

이 문제를 해결하고 .grid-3 컨테이너의 행을 콘텐츠 크기에 맞게 조정하려면 Grid-auto-rows 속성을 수정해야 합니다. max-content 값을 Grid-auto-rows와 함께 사용하면 외부 그리드의 행 높이에 관계없이 내부 그리드의 각 행 크기가 해당 콘텐츠에 따라 조정됩니다.

그리드 설정 -auto-rows: 내부 .grid-3 컨테이너의 max-content, 브라우저에 해당 행 내의 콘텐츠만을 기반으로 각 행의 크기를 계산하도록 지시합니다. 이를 통해 내부 그리드가 외부 그리드와 독립적으로 조정되어 원하는 대로 내용을 완벽하게 감싸는 행이 생성됩니다.

업데이트된 코드 조각

아래 업데이트된 코드 조각에서 확인할 수 있습니다. 내부 .grid-3 컨테이너의 Grid-auto-rows 수정:

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
}

이 조정을 통해 .grid-3 컨테이너는 콘텐츠의 높이에 동적으로 적응하여 원하는 크기 조정 동작을 달성합니다.

위 내용은 CSS 그리드 행을 중첩 그리드의 콘텐츠 높이에 맞게 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!