如何使嵌套的 CSS 網格行適應其內容大小而不是繼承父網格的高度？-css教學-PHP中文網

如何使嵌套的 CSS 網格行適應其內容大小而不是繼承父網格的高度？

Linda Hamilton

發布： 2024-11-23 06:03:14

原創

352 人瀏覽過

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財產。預設情況下，此屬性設定為 auto，這會在行之間均勻分配空間，而不管其內容大小如何。但是，在這種情況下，我們需要根據內容進行調整的行。

要實現此目的，您需要在 .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中文網其他相關文章！