How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?

问题

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

回答1:

Use this syntax:

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

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>

回答2:

Add this code to your CSS:

grid-template-columns: auto auto auto;

回答3:

you just need to wrap them separately.

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

our same style code works until grid-container wraps.

In your code, white this html. Other, same css should work.

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

来源：https://stackoverflow.com/questions/53434024/how-to-limit-the-amount-of-columns-in-larger-viewports-with-css-grid-and-auto-fi

标签

html

css

css3

responsive-design

css-grid