為什麼 CSS Grid 中的 `minmax()` 預設為 `max` 而不是 `min`？

為什麼minmax() 預設為Max

您可能已經注意到，當使用minmax() 設定網格行或列的高度或寬度時，預設行為是讓軌道擴展至其最大尺寸而不是保持其最小尺寸。這可能會令人困惑，特別是如果您希望軌道根據 minmax() 中的 min() 值保持盡可能小的大小。

理解行為

原因此行為在於網格佈局中軌道的預設縮放模式。根據 CSS 規範，軌道通常會成長以填滿可用空間，直到達到最大尺寸。如果可用空間大於所有軌道的總最小大小，則剩餘空間將均勻分佈在無限軌道（沒有定義最大大小的軌道）中。

通常需要這種預設行為，因為它確保軌道有效地佔用可用空間。

實現最小尺寸優先權

將網格行或列保持最小尺寸，但當更多時擴展到最大尺寸添加內容後，您可以結合使用minmax() 和其他CSS屬性：

• 使用minmax(min-size, min-size)調整行/列大小：這將迫使軌道始終保持最小尺寸，即使有可用空間。
• 指定max-width/max-height網格項目：這將防止網格項超過其最大大小，確保網格行或列不會擴展超過其指定的最大大小。

範例：

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  grid-gap: 20px;
}

.item {
  max-width: 200px;
}

在此範例中，網格列的最小寬度始終為 100 像素，但不會超出該寬度 尺寸。如果在網格項目中添加更多內容，則列將擴展以容納新內容，但不會超過其最大寬度。

以上是為什麼 CSS Grid 中的 `minmax()` 預設為 `max` 而不是 `min`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！