如何在没有媒体查询的情况下限制 CSS 网格中的最大列数？

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

CSS 网格提供了一种强大的方法来布局 Web 元素，但有时您可能需要指定最大列数网格中的列数，同时仍然允许元素在屏幕宽度变化时换行。

要在不使用媒体查询或 JavaScript 的情况下实现此目的，请考虑使用以下 CSS 规则：

grid-template-columns: repeat(auto-fill, minmax(max(width, 100%/N), 1fr));

这里，N 表示您想要限制网格的最大列数。

max(width, 100%/N) 部分确保每列的最小宽度为容器宽度或 100%/N（以较大者为准）。此配置有效地将列数限制为 N，同时允许元素在必要时换行到新行。

例如：

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

此 CSS 将创建一个最多 4 个网格列，每列的最小宽度为 200px 或容器宽度的 25%。

您可以调整 --n 值来更改最大值根据需要设置列数。

该解决方案提供了一种灵活且可定制的方法来创建具有有限列数的网格，同时仍然保持跨不同屏幕尺寸的响应能力。

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