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.

  //grid-items


  //grid-items (2nd row)

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;
}