如何使用CSS Grid和自动填充/调整功能来限制较大视口中的列数? [英] How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?

问题描述

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

I'm starting to work with CSS Grid, I've been reading about the properties to help with responsiveness; so I'm trying to build a small grid with 6 elements; my intention is for them to show as 2 rows on larger devices like this:

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

And also to show them all stacked on smaller devices,so everything is good regarding the smaller devices, I'm using auto-fill so it stays responsive, however if I the view the page on a laptop screen or desktop it is able to fill one more column and ends up looking like this:

这是我的grid布局代码.

This is my grid layout code.

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

是否有办法保持响应行为，但同时还要设置最大列数?任何帮助表示赞赏；如果只能使用媒体查询来完成此操作，那我将首先尝试寻找不使用媒体查询的方法.另外，我通过在整个网格容器中设置水平padding来补偿附加列的大小，从而达到了预期的效果.但是再说一次，如果有更好的方法，我会全力以赴.谢谢！

Is there a way to keep the responsive behavior but setting a max number of columns as well? Any help is appreciated; If it can only be done with media-queries that's fine, but I'm first trying to look for ways to do it without using those. Also, I kinda made it work as intended by setting a horizontal padding to the whole grid container to compensate for the size of the additional column; but again, if there's a better way I'm all ears. Thank you!

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

推荐答案

使用以下语法:

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

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

或

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

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

代替此:

grid-template-columns:重复(自动填充，260px)；

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

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

Use media queries to set less columns on smaller screens.

如果行间距和列间距相同，则可以使用 grid-gap .

Also if the row and column gap is the same you can use grid-gap.

文档

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

这篇关于如何使用CSS Grid和自动填充/调整功能来限制较大视口中的列数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！