适合限制较大视口中的列数

适合限制较大视口中的列数

本文介绍了如何使用 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 Examplehttps://codepen.io/IvanS95/pen/NEYdxb

解决方案

Use this syntax:

Or

Instead of this:

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 网格和自动填充/适合限制较大视口中的列数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 10:51