如何在沒有媒體查詢的情況下定義 CSS 網格中的最大列數？

CSS 網格：在沒有媒體查詢的情況下定義最大列數

在CSS 網格中，您可以指定網格的最大列數，同時允許元素換行螢幕寬度變化時的行。為了實現這一點，請考慮使用 max(width, 100%/N) 函數，其中 N 代表最大列數。

max 函數確保如果容器的寬度增加，100%/N 將永遠大於寬度。這確保每行永遠不會超過 N 個元素。

這是一個範例：

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

.grid-item {
  /* Styling for grid items */
}

在此範例中，使用 -- 最大列數設定為 4 n 自訂屬性。 grid-template-columns 屬性使用自動填入來建立列，並套用 max 函數來確保指定的最大列數。

您可以根據需要調整 --n 值來變更最大列數。這為您的需求提供了通用解決方案，無需依賴 JavaScript 或媒體查詢。

以上是如何在沒有媒體查詢的情況下定義 CSS 網格中的最大列數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！