如何使嵌套的 CSS 網格行自動調整其高度以符合內容？-css教學-PHP中文網

如何使嵌套的 CSS 網格行自動調整其高度以符合內容？

DDD

發布： 2024-11-24 20:05:13

原創

977 人瀏覽過

How can I make nested CSS Grid rows automatically adjust their height to match content?

CSS 網格：自動調整行高，依內容調整大小

使用巢狀CSS 網格時，可以在兩個網格之間實現一致的行高度一個挑戰。在這種情況下，右側巢狀網格中的行被迫與左側巢狀網格中的行高度匹配，從而導致間距不均勻。

要修正此問題，您可以使用 grid-auto- rows：右側巢狀網格的 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中文網其他相關文章！