콘텐츠 높이에 맞게 중첩된 CSS 그리드 행의 자동 크기를 조정하려면 어떻게 해야 합니까?

CSS 그리드: 콘텐츠에 맞게 행 크기 자동 조정

중첩 CSS 그리드를 사용할 때 행 높이가 높아지는 문제가 발생할 수 있습니다. 오른쪽 중첩 그리드가 왼쪽 그리드의 영향을 받아 높이가 일치하지 않게 됩니다. 이 문제를 해결하고 오른쪽 행을 콘텐츠 크기에 맞게 조정하려면 Grid-auto-rows: max-content 속성을 활용할 수 있습니다.

제공된 코드 조각에서 오른쪽 중첩 그리드의 그리드는- 자동 행: 자동은 행 높이가 그 안의 내용을 기반으로 자동으로 계산되도록 설정합니다. 그러나 왼쪽 그리드에 여러 행이 있으므로 오른쪽 그리드의 높이도 영향을 받아 행 높이가 고르지 않게 됩니다.

오른쪽 중첩 그리드의 Grid-auto-rows 속성을 Grid-auto-rows로 수정합니다. : max-content, 행 높이가 각 행 내에서 가장 큰 요소의 높이로 설정되도록 강제합니다. 이렇게 하면 콘텐츠 크기에 관계없이 오른쪽 중첩 그리드의 행이 왼쪽 그리드의 행 높이와 일치하게 됩니다.

다음은 업데이트된 코드입니다.

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

이 수정을 통해 오른쪽 중첩 그리드의 행 높이가 행은 콘텐츠 크기에 자동으로 조정되어 두 그리드의 행 높이가 동일하도록 합니다.

위 내용은 콘텐츠 높이에 맞게 중첩된 CSS 그리드 행의 자동 크기를 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!