如何在没有媒体查询的情况下包装 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中文网其他相关文章！