时间戳

首页 > 解决方案 > CSS 网格模板列重复不超过 X 次

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

问题描述

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

.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？

标签： htmlcsscss-grid

解决方案

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

§ 7.2.2.2。重复填充：auto-fill和auto-fit 重复

当auto-fill[or auto-fit] 被指定为重复次数时……那么重复次数是最大可能的正整数，不会导致网格溢出其网格容器。

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

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

即，列轨道在所有屏幕尺寸上变得固定，并且布局没有响应。

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

否则，考虑弹性布局：

jsFiddle 演示

.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>

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

推荐阅读