CSS 網格：如何響應式限制最大列數？

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

問題：

定義一個具有最大列數同時允許元素自動換行到新行的CSS 網格是否可行？螢幕寬度變化？

解：

使用CSS Grid，可以透過repeat(auto-fill, minmax(max(width, 100)限制列數%/N), 1fr )) 文法.這裡，N 表示所需的最大列數。隨著網格容器寬度的增加，計算的 100%/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 {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

在此範例中，--n 自訂屬性設為4，定義屬性為4，最大值4 列。隨著容器寬度的變化，項目將自動換行到新行，同時保持指定的列限制。

此解決方案提供靈活且響應式的網格佈局，無需依賴媒體查詢或 JavaScript。

以上是CSS 網格：如何響應式限制最大列數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！