首頁 > web前端 > css教學 > 為什麼 `grid-template-rows` 中的 `minmax()` 有利於最大尺寸,以及如何保持最小行高?

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

Barbara Streisand
發布: 2024-12-08 14:00:23
原創
916 人瀏覽過

Why Does `minmax()` in `grid-template-rows` Favor Maximum Size, and How Can I Maintain Minimum Row Heights?

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板