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。理想情况下，我想像这样在minmax指令中使用repeat：

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

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

Answer 1

如果我正确理解您可以做的事情，则是为更大的屏幕设置媒体查询。假设您要为992px以上的屏幕显示3列网格，可以使用类似的

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

让我知道这是否对您有帮助！在这里https://codepen.io/anon/pen/Krzbmz

检查

Answer 2

我认为您不能使用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

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

2 个答案: