상위 그리드의 높이를 상속하는 대신 중첩된 CSS 그리드 행을 콘텐츠 크기에 맞게 조정하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

상위 그리드의 높이를 상속하는 대신 중첩된 CSS 그리드 행을 콘텐츠 크기에 맞게 조정하려면 어떻게 해야 합니까?

Linda Hamilton

풀어 주다： 2024-11-23 06:03:14

원래의

351명이 탐색했습니다.

How can I make nested CSS Grid rows adjust to their content size instead of inheriting the height of a parent grid?

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

제공된 HTML 및 CSS에서 중첩 그리드 행이 발생하는 문제가 발생했습니다. Grid .grid-3은 해당 행이 중첩된 그리드 .grid-2의 높이에 맞춰 정렬되도록 합니다. 이 문제를 해결하려면 .grid-3 행을 콘텐츠 크기에 맞게 조정하여 .grid-2 행의 높이를 일치시키려고 합니다.

해결책은 Grid-auto-rows에 있습니다. 재산. 기본적으로 이 속성은 내용 크기에 관계없이 행 간에 공간을 균등하게 분배하는 자동으로 설정됩니다. 하지만 이 경우에는 콘텐츠에 맞게 조정되는 행이 필요합니다.

이를 달성하려면 .grid-3 그리드에 Grid-auto-rows: max-content를 설정해야 합니다. 이는 브라우저가 내용에 따라 행을 높이도록 지시하여 .grid-2 행의 높이와 일치하도록 합니다.

업데이트된 CSS 스니펫은 다음과 같습니다.

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

로그인 후 복사

이 변경으로 .grid-3의 행은 이제 내용을 완전히 유지하면서 .grid-2 행의 높이와 일치하여 내용에 맞게 크기가 조정됩니다.

<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 그리드를 구성하는 방법을 보여줍니다.

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