时间戳

首页 > 解决方案 > 如何使用 minmax func 来限制列数

css - 如何使用 minmax func 来限制列数

问题描述

我正在尝试使用 css-grid 创建响应式网格设计。我想要大约 400 像素的列并且可以扩展到 500 像素。当一个网格单元不能再占据它的空间时，我希望它换行。本质上，在小视口上，我想要一列，而在更大的视口上，我想要最多 2 列。有没有办法在没有媒体查询的情况下做到这一点？我试图避免这种情况，因为我有一个可以扩展的侧边栏，它不会改变视图宽度。

.grid-wrapper {
  display: grid;
  /* below line DOES NOT WORK */
  grid-template-columns: repeat(minmax(1, 2), minmax(400, 500));
}

标签： cssfrontendcss-grid

解决方案

网格自动填充最大宽度

你不能做 minmax 然后 minmax 就重复。

重复是第一个告诉重复多少次，第二个是重复什么。

使用自动填充给你最小宽度。

grid-template-columns: repeat(auto-fill,minmax(400px,1fr));

你可以告诉.grid-wrapper例如max-width: 1000px;

就像你有一些方法来控制网格。

我在这里做了一个简短的解释，但是，我并不完全理解你的解释——你的桌子是什么样子的。

推荐阅读