중첩된 CSS 그리드 행이 내용에 맞게 높이를 자동으로 조정하도록 하려면 어떻게 해야 합니까?

CSS 그리드: 자동 높이 행, 내용에 맞게 크기 조정

중첩된 CSS 그리드로 작업할 때 두 그리드 모두에서 일관된 행 높이를 달성하는 것은 다음과 같습니다. 도전. 이 시나리오에서는 오른쪽 중첩 그리드의 행이 왼쪽 중첩 그리드의 행 높이와 일치하도록 강제되어 간격이 고르지 않게 됩니다.

이 문제를 해결하려면 Grid-auto- 행: 오른쪽 중첩 그리드의 max-content 속성입니다. 이 속성은 각 행의 높이를 가장 높은 하위 요소의 높이로 설정합니다. 결과적으로, 행은 콘텐츠에 맞게 동적으로 조정되어 왼쪽 중첩 그리드의 높이와 높이를 정렬합니다.

예:

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

이 수정 오른쪽 중첩 그리드의 각 행 크기가 내용에 맞게 조정되어 두 그리드 사이에 일관된 높이가 만들어지도록 합니다. 업데이트된 스니펫은 다음과 같습니다.

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

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

<div class="grid-2">
  <div class="grid-2">
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
  </div>
  <div class="grid-3">
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
  </div>
</div>

이제 왼쪽 및 오른쪽 중첩 그리드의 행이 자동으로 높이를 조정하여 시각적으로 일관된 결과를 생성합니다.

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