為什麼 `grid-template-rows` 中的 `minmax()` 有利於最大尺寸，以及如何保持最小行高？

minmax() 函數預設為Max 行為

將minmax() 應用於grid-template-rows 時，結果行為通常會違反預期，優先考慮最大值最小值。這會導致網格行意外拉伸，讓我們想知道：

如何將網格行保持在最小大小

確保網格行保持其最小聲明大小，同時擴展到最大大小必要時，請考慮以下解決方案：

1.對grid-template-rows 使用minmax(min-content, max-size)

此修改強制行「緊緊包裹」其內容，確保它們以最小大小開始並僅擴展當添加更多內容時。最大大小保證它們不會超過所需的最大值。

2.為網格項添加 max-height

要防止網格項超出所需的最大尺寸，請為其設定 max-height。

例如：

body {
  grid-template-rows: minmax(50px, min-content);
}

grid-items {
  max-height: 150px;
}

透過這個方法，網格行最初的高度將為 50 像素，但會擴展以適應其他內容。但是，它們不會超過 150px 的最大高度。

以上是為什麼 `grid-template-rows` 中的 `minmax()` 有利於最大尺寸，以及如何保持最小行高？的詳細內容。更多資訊請關注PHP中文網其他相關文章！