如何讓嵌套 CSS 網格行自動調整大小以符合內容高度？

CSS 網格：自動調整行大小以適合內容

使用巢狀CSS 網格時，可能會遇到行高的問題右側嵌套網格的高度受到左側網格的影響，導致高度不符。要解決此問題並使右側行調整為內容大小，我們可以利用 grid-auto-rows: max-content 屬性。

在提供的程式碼片段中，右側巢狀網格的 grid- auto-rows：auto 設定會根據行內內容自動計算行高。但由於左側網格有多行，右側網格的高度也會受到影響，導致行高不均勻。

透過修改右側巢狀網格的 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中文網其他相關文章！