CSS 网格：如何在没有媒体查询的情况下设置最大列数？

CSS 网格：定义没有媒体查询的最大列数

问题：

我们能否指定一个具有最大列数的 CSS 网格，同时允许元素动态换行到新行上屏幕宽度改变？

答案：

是的，使用 CSS 网格，我们可以实现这一点，而无需使用 JavaScript 或媒体查询。这种方法利用了自动调整列的概念：

解决方案：

1. 创建一个带有 display: grid 属性的网格容器。
2. 使用repeat()函数设置grid-template-columns属性，并自动调整作为重复类型。
3. 在自动调整中，使用 minmax(max(width, 100%/N), 1fr) 指定列行为。

说明：

• max(width, 100%/N) 确保列宽为最大宽度或容器宽度的分数 (100%/N)。
• 1fr 将默认列宽设置为剩余空间的 1 分数。

作为结果，当容器宽度增加时，列将扩展以适应定义的最大列数内的可用空间。元素将根据需要自动换行。

代码片段：

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

示例：

在以下示例创建了一个最多包含 4 列的网格容器，并且元素环绕相应地：

<div><p>通过这种方法，我们可以定义 CSS 网格中的最大列数，允许元素在屏幕宽度变化时换行到新行，而不需要媒体查询。</p></div>

以上是CSS 网格：如何在没有媒体查询的情况下设置最大列数？的详细内容。更多信息请关注PHP中文网其他相关文章！