중첩된 CSS 그리드에서 자동 높이 행을 달성하는 방법은 무엇입니까?

CSS 그리드 레이아웃: 콘텐츠 기반 크기 조정을 사용한 자동 높이 행

이 시나리오에서는 두 개의 중첩 그리드가 있는 그리드 디자인이 있습니다. 왼쪽 중첩 그리드는 예상대로 작동하지만 오른쪽 중첩 그리드의 행 높이는 왼쪽 그리드의 행 높이와 일치하도록 설정됩니다.

grid-auto-rows 속성을 max-로 설정 오른쪽 중첩 그리드의 콘텐츠를 사용하면 해당 행이 콘텐츠 높이에 맞게 조정되어 문제가 해결되고 두 중첩 그리드의 행이 동일하게 됩니다. height:

.grid-3 {
  grid-auto-rows: max-content;
}

이 수정을 통해 오른쪽 중첩 그리드의 행 크기가 콘텐츠에 맞게 자동으로 조정되어 두 그리드 사이에 원하는 시각적 균형이 유지됩니다.

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