如何在不使用媒體查詢的情況下設定 CSS 網格中的最大列數？

沒有媒體查詢的CSS 網格中的最大列數

定義網格最大列數

定義具有設定最大值的網格是否可行列數，同時在視口大小改變時允許元素分解到新行？預設情況下，網格允許列無限擴展，這可能會導致在較窄的螢幕上出現不良佈局。

實作具有最大列數的網格

為了解決這個問題，CSS 網格引入了使用的概念grid-template-columns 屬性中的 max() 。 max() 函數接受兩個參數：第一個參數表示單一列的最大寬度，第二個參數確保每列在其父容器內保持回應。

實作

考慮以下內容程式碼片段：

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

這裡，--n 定義最大列數。 minmax() 確保每列的最小寬度為 200px，但不會超過 100%/var(--n)。此公式保證隨著容器寬度的增加，列寬永遠不會超過 100%/maximum_number_of_columns，從而防止建立額外的欄位。

此技術可讓您建立具有適應各種螢幕的響應式設計的網格大小，同時保持指定的最大列數。

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