如何在沒有媒體查詢的情況下包裝 CSS 網格項目？

不使用媒體查詢的 CSS 網格包裹

CSS 網格中的一個常見挑戰是包裹項目以適應可用空間。如果不需要媒體查詢，則必須採用替代方法。

自動填充解決方案

考慮使用 Repeat() 表示法的變體。當指定為重複次數時，自動填入會自動計算適合可用空間的重複次數，而不會導致溢位。

以下是一個範例：

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid > * {
  background-color: green;
  height: 200px;
}

使用自動填充，網格將根據可用寬度調整其列數，確保項目良好地換行。這消除了指定固定列寬的需要。

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