如何使用自动填充或自动调整在没有媒体查询的情况下实现 CSS 网格环绕？

使用 CSS 网格自动填充或自动调整进行无媒体查询换行

在 CSS 网格中，无需媒体查询即可实现自动换行通过在 grid-template-columns 中的 Repeat() 表示法中使用 auto-fill 或 auto-fit 关键字，或者grid-template-rows.

自动填充

auto-fill 关键字定义填充容器可用空间的网格单元数。它将自动调整列数以适应容器大小而不会溢出。

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

在此示例中，grid-template-columns 属性指定网格应自动填充其宽度，宽度为 186px

自动调整

auto-fit 关键字的行为类似自动填充，但它会调整列的大小以适应可用空间而不是列数。

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

在此示例中，grid-template-columns 属性指定网格应自动将尽可能多的列放入可用空间中，每列的最小宽度为 186 像素，自动设置最大宽度。

这些技术允许您创建一个 CSS 网格来包裹其内容无需媒体查询，动态调整可用空间。

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