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

查看：21
本文介绍了如何使用 CSS 网格和自动填充/适合限制较大视口中的列数?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

这是我的 grid 布局代码.

显示:网格；网格模板列:重复(自动填充，260 像素)；对齐内容:居中；行距:18px；列距:18px；

有没有办法既保持响应行为又设置最大列数?任何帮助表示赞赏；如果它只能通过媒体查询来完成，那很好，但我首先尝试寻找不使用它们的方法.此外，我通过为整个网格容器设置水平 padding 以补偿附加列的大小，使其按预期工作；但同样，如果有更好的方法，我会全神贯注.谢谢！

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

解决方案

使用以下语法:

<块引用>

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

或

<块引用>

网格模板列:repeat(3,260px);

取而代之的是:

<块引用>

网格模板列:重复(自动填充，260像素)；

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

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

文档

.grid-container{显示:网格；网格模板列:260 像素 260 像素 260 像素；网格间隙:18px；背景色:#fff;颜色:#444；对齐内容:居中；}.卡片 {边框:1px 实心 #000；宽度:260px；高度:260px；}

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

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

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

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

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

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:

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:

This is my grid layout code.

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

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!

Working Example https://codepen.io/IvanS95/pen/NEYdxb

解决方案

Use this syntax:

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

Or

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

Instead of this:

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

Use media queries to set less columns on smaller screens.

Also if the row and column gap is the same you can use 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>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆