CSS 网格：如何响应式限制最大列数？

CSS 网格：在没有媒体查询的情况下维护最大列数

问题：

定义一个具有最大列数同时允许元素自动换行到新行的 CSS 网格是否可行？屏幕宽度变化？

解决方案：

使用CSS Grid，可以通过repeat(auto-fill, minmax(max(width, 100)限制列数%/N), 1fr)) 语法。这里，N 表示所需的最大列数。随着网格容器宽度的增加，计算的 100%/N 部分可确保每列的宽度永远不会超过此限制。

示例：

考虑以下代码片段：

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

.grid-item {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

在此示例中，--n 自定义属性设置为 4，定义最大值4 列。随着容器宽度的变化，项目将自动换行到新行，同时保持指定的列限制。

此解决方案提供灵活且响应式的网格布局，无需依赖媒体查询或 JavaScript。

以上是CSS 网格：如何响应式限制最大列数？的详细内容。更多信息请关注PHP中文网其他相关文章！