CSS 网格模板列重复不超过 X 次

Question

我有一个布局，其中多个项目将在网格中对齐。我们以以下为例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  display: block;
  width: 100%;
  background-color: purple;
  color: white;
  text-align: center;
  padding: 30px 5px;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

在上面的代码中，网格将每行重复 3 列，每个项目将扩展为行宽的 1/3。问题是在响应式情况下，网格将始终重复 3 列。

如果我将repeat 值更改为auto-fit 并调整列大小以使用minmax，我可以控制页面缩小的方式并将列宽和计数减少到某个合理的值。所以调整后的代码看起来像这样：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-gap: 20px;
}

.grid-item {
  display: block;
  width: 100%;
  background-color: teal;
  color: white;
  text-align: center;
  padding: 30px 5px;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

按比例缩小效果很好，但这是我遇到问题的地方 - 我想在页面放大时将列数限制为 3。理想情况下，我想在repeat 指令中使用minmax，如下所示：

grid-template-columns: repeat( minmax(1, 3), minmax(300px, 1fr) );

但这当然行不通。如何将重复限制为 3 列，同时仍保持使用 auto-fit 的缩小设置？

Answer 1

我认为您不能使用auto-fit 或auto-fill 对列数设置最大限制。根据定义，它们将在容器中创建尽可能多的轨道而不会溢出：

§ 7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

当auto-fill [或auto-fit] 作为重复数时... 那么重复次数是最大可能的正数 不会导致网格溢出其网格容器的整数。

而且您不能将minmax() 函数的 max 值设置为 30%，因为这样会遇到与第一个示例相同的问题：

grid-template-columns: repeat(3, 1fr)

即，列轨道在所有屏幕尺寸上都是固定的，并且布局不响应。

我了解到您正在寻找不需要媒体查询的解决方案。但如果你想使用网格布局，我认为媒体查询可能是你最好的选择。

否则，考虑弹性布局：

jsFiddle demo

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 30%;
  min-width: 300px;
  flex-grow: 1;
  background-color: teal;
  color: white;
  text-align: center;
  padding: 30px 5px;
  border: 5px solid white;
}

* {
  box-sizing: border-box;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

如果你走弹性路线，那么也请阅读这篇文章：

• Targeting flex items on the last row

Answer 2

如果我理解正确，您可以为更大的屏幕设置媒体查询。假设您想为超过 992 像素的屏幕显示 3 列网格，您可以使用类似这样的内容

@media only screen and (min-width: 992px){
  .grid-container{
    grid-template-columns: repeat(3, 1fr);
  }
}

如果这对你有帮助，请告诉我！在这里查看https://codepen.io/anon/pen/Krzbmz

Answer 3

我通过将 max-width 设置为网格解决了类似的问题。我的列是重复的（自动调整，150 像素）。我想要最大列数为 x4，间隙为 50px。所以网格的最大宽度设置为 800px。