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

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

問題：

問題：

問題：

問題：

1. 問題：
3. 問題：

問題：

• 問題：

我們能否指定一個具有最大列數的CSS 網格，同時允許元素動態換行到新行上螢幕寬度改變？

答案：

是的，使用 CSS 網格，我們可以實現這一點，而無需使用 JavaScript 或媒體查詢。這種方法利用了自動調整列的概念：

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

解決方案：

建立一個帶有 display: grid 屬性的網格容器。

<div>

使用repeat()函數設定grid-template-columns屬性，並自動調整為重複類型。

在自動調整中，使用 minmax(max(width, 100%/N), 1fr) 指定列行為。 說明：max(width, 100%/N) 確保列寬為最大寬度或容器寬度的分數(100%/ N)。 1fr 將預設列寬設定為剩餘空間的 1 分數。 作為結果，當容器寬度增加時，列將擴展以適應定義的最大列數內的可用空間。元素將根據需要自動換行。 程式碼片段：範例：在以下範例建立了一個包含多達 4列的網格容器，並且元素環繞相應地：透過這種方法，我們可以定義CSS 網格中的最大列數，允許元素在螢幕寬度變化時換行到新行，而不需要媒體查詢。

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