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

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

CSS 網格提供了一種強大的方法來佈局Web 元素，但有時您可能需要指定最大列數網格中的列數，同時仍允許元素在螢幕寬度變化時換行。

要在不使用媒體查詢或JavaScript 的情況下實現此目的，請考慮使用以下CSS 規則：

grid-template-columns: repeat(auto-fill, minmax(max(width, 100%/N), 1fr));

這裡，N 表示您想要限制網格的最大列數。

max(width, 100%/N) 部分確保每列的最小寬度為容器寬度或 100%/N（以較大者為準）。此配置有效地將列數限制為 N，同時允許元素在必要時換行到新行。

例如：

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

此 CSS 將建立一個最多 4 個網格列，每列的最小寬度為 200px 或容器寬度的 25%。

您可以調整 --n 值來更改最大值根據需要設定列數。

該解決方案提供了一種靈活且可自訂的方法來創建具有有限列數的網格，同時仍保持跨不同螢幕尺寸的響應能力。

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