如何使 CSS 網格行適應嵌套網格中的內容高度？

CSS 網格- 根據內容調整行高：自動高度的最大內容

使用嵌套CSS 網格時，可能會遇到外部高度的情況網格行會影響內部網格行，即使它們應該理想地調整其內容的大小。在這種情況下，實現所需行為的關鍵是使用 CSS 屬性 grid-auto-rows。

巢狀CSS 網格和行高傳播

在提供的程式碼片段中，我們有兩個網格容器（div 和.grid-2）在父網格容器（grid -1）內水平排列。每個網格中的欄位使用 grid-template-columns 定義，行的自動放置由 grid-auto-rows 控制。

預設情況下，.grid-2 容器設定 grid-auto- rows 為 auto，這表示行會調整以適合其內容。但是，內部網格容器 .grid-3 出現了問題。即使 grid-auto-rows 也設定為 auto，巢狀網格的行高仍會受到外部網格行的影響。這會導致 .grid-2 容器較高的一側將其高度傳播到 .grid-3 容器，從而使兩個網格的行高度保持一致。

將網格行設定為「最大內容」

為了解決這個問題並將.grid-3 容器的行調整為內容的大小，我們需要修改grid-auto-rows 屬性。 max-content 值與 grid-auto-rows 一起使用時，可確保內部網格中的每一行根據其內容調整大小，而不管外部網格中的行高度如何。

透過設定 grid -auto-rows：內部 .grid-3 容器中的 max-content，我們指示瀏覽器僅根據該行中的內容來計算每行的大小。這允許內部網格獨立於外部網格進行調整，從而根據需要產生完美包裹其內容的行。

更新的程式碼片段

在下面更新的程式碼片段中，您可以看到對內部.grid-3 容器中的grid-auto-rows 的修改：

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
}

透過此調整，.grid-3 容器中的行將動態適應內容的高度，實現所需的大小調整行為。

以上是如何使 CSS 網格行適應嵌套網格中的內容高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！