如何在不使用媒体查询的情况下设置 CSS 网格中的最大列数？

没有媒体查询的 CSS 网格中的最大列数

定义网格最大列数

定义具有设定最大值的网格是否可行列数，同时在视口大小发生变化时允许元素分解到新行？默认情况下，网格允许列无限扩展，这可能会导致在较窄的屏幕上出现不良布局。

实现具有最大列数的网格

为了解决这个问题，CSS 网格引入了使用的概念grid-template-columns 属性中的 max() 。 max() 函数接受两个参数：第一个参数表示单个列的最大宽度，第二个参数确保每列在其父容器内保持响应。

实现

考虑以下内容代码片段：

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

这里，--n 定义最大列数。 minmax() 确保每列的最小宽度为 200px，但不会超过 100%/var(--n)。此公式保证随着容器宽度的增加，列宽永远不会超过 100%/maximum_number_of_columns，从而防止创建额外的列。

此技术使您能够创建具有适应各种屏幕的响应式设计的网格大小，同时保持指定的最大列数。

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