如何在没有媒体查询的情况下在 CSS 中实现网格环绕？

使用 CSS 和自动填充进行网格换行

通过使用自动填充功能，可以在不依赖媒体查询的情况下在 CSS 中实现网格换行填写repeat() 符号。原始问题中的代码片段演示了具有显式列宽的网格，但为了允许项目定义自己的宽度，我们可以对其进行如下修改：

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

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

自动填充

自动填充，如CSS网格布局规范中所定义，确保repeat()表示法中的重复次数是最大可能的值，而不会导致grid 溢出其容器。这允许网格根据其项目的宽度动态调整列数。

在我们的例子中，我们指定自动填充作为重复次数，指定最小内容作为每列的固定大小。最小内容确保每列的大小适合其内容，从而允许项目确定自己的宽度。

结果是一个网格，无需媒体查询即可包装其项目，有效地很好地间隔它们即使项目数量不确定。

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