Question

我开始使用CSS Grid，我一直在阅读有关有助于响应性的属性。所以我试图用6个元素构建一个小的网格；我的意图是让它们在这样的较大设备上显示为2行：

还要显示它们全部堆叠在较小的设备上，所以对于较小的设备来说一切都很好，我使用的是time php dancebattle.php，因此它可以保持响应，但是如果我在笔记本电脑屏幕或台式机上查看页面它可以再填充一列，最终看起来像这样：

这是我的auto-fill布局代码。

grid

是否有办法保持响应行为，但同时还要设置最大列数？任何帮助表示赞赏；如果只能通过媒体查询来做到这一点，那么我首先尝试寻找不使用媒体查询的方式。另外，我通过在整个网格容器中设置水平display: grid; grid-template-columns: repeat(auto-fill, 260px); justify-content: center; row-gap: 18px; column-gap: 18px;来补偿额外列的大小，从而达到了预期的效果。但是再说一次，如果有更好的方法，我会全力以赴。谢谢！

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

Answer 1

使用以下语法：

网格模板列：260px 260px 260px;

或

grid-template-columns：repeat（3,260px）;

代替此：

grid-template-columns：重复（自动填充，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>

Answer 2

将此代码添加到CSS：

grid-template-columns: auto auto auto;

Answer 3

您只需要单独包装它们即可。

<div class="grid-container">
  //grid-items
</div>
<div class="grid-container">
  //grid-items (2nd row)
</div>

我们相同的样式代码有效，直到grid-container结束。

在您的代码中，白色 this html。其他，相同的CSS应该可以工作。

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

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

如何使用CSS Grid和自动填充/调整功能来限制较大视口中的列数？

3 个答案: