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

Question

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

Answer 1

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>

Answer 2

Add this code to your CSS:

grid-template-columns: auto auto auto;

Answer 3

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>