html - 如何使用 CSS Grid 和自动填充/适合来限制较大视口(viewport)中的列数？

Question

我开始使用 CSS Grid，我一直在阅读有关有助于提高响应能力的属性；所以我正在尝试构建一个包含 6 个元素的小网格；我的意图是让它们在更大的设备上显示为 2 行，如下所示:

而且为了显示它们全部堆叠在较小的设备上，所以对于较小的设备来说一切都很好，我正在使用 auto-fill 所以它保持响应，但是如果我查看页面笔记本电脑屏幕或台式机，它可以再填充一列，最终看起来像这样:

这是我的 grid 布局代码。

display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;

有没有办法在保持响应行为的同时设置最大列数？任何帮助表示赞赏；如果它只能通过媒体查询来完成，那很好，但我首先尝试寻找不使用这些的方法。此外，我通过为整个网格容器设置水平 padding 来补偿附加列的大小，使其按预期工作；但同样，如果有更好的方法，我会洗耳恭听。谢谢!

工作示例 https://codepen.io/IvanS95/pen/NEYdxb

Answer 1

使用这个语法:

grid-template-columns: 260px 260px 260px;

或者

grid-template-columns: repeat(3,260px);

取而代之的是:

grid-template-columns: repeat(auto-fill, 260px);

使用媒体查询在较小的屏幕上设置较少的列。

此外，如果行间距和列间距相同，您可以使用 grid-gap。

Documentation

.grid-container{
  display: grid;
  grid-template-columns: 260px 260px 260px;
  grid-gap: 18px;
  background-color: #fff;
  color: #444;
  justify-content: center; 
}

.card {
   border: 1px solid #000;
   width: 260px;
   height: 260px;
}

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