没有媒体查询可以实现 CSS 网格环绕吗？

使用自动填充或自动调整的 CSS 网格换行

CSS 网格换行是否可以在不借助媒体查询的情况下实现？此查询源于将非确定性项目放置在具有所需换行行为的网格中的要求。 Flexbox 在确保适当间距方面的缺点使其成为不太可行的选择。

示例代码：

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

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

自动填充与自动调整

解决方案在于采用以下任一方法自动填充或自动调整作为重复（）中的第一个参数

自动填充

指定自动填充作为重复次数后，将调整重复次数以防止网格溢出网格容器。

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

以上是没有媒体查询可以实现 CSS 网格环绕吗？的详细内容。更多信息请关注PHP中文网其他相关文章！