How to Specify the Maximum Number of Columns Repeat() Will Create Using Auto-Fit/Fill

How to specify the maximum number of columns repeat() will create using auto-fit/fill?

CSS custom properties ('CSS variables') to the rescue

.grid {
  --repeat: auto-fit;
}
@media (min-width: calc(250px * 3)) {
  .grid {
    --repeat: 3;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--repeat, auto-fit), minmax(calc(250px * 1) , 1fr));
  grid-gap: 8px;
}

.grid .item {
  background-color: silver;
  padding: 8px;
}

<div class="grid">
  <div class="item">Lorem, ipsum.</div>
  <div class="item">Soluta, voluptatibus!</div>
  <div class="item">Reprehenderit, consequuntur.</div>
  <div class="item">Temporibus, veritatis!</div>
  <div class="item">Consequatur, voluptates.</div>
  <div class="item">Distinctio, adipisci.</div>
  <div class="item">Repellat, corrupti.</div>
  <div class="item">Quia, corporis.</div>
  <div class="item">Nobis, aut.</div>
  <div class="item">Dicta, officiis?</div>
  <div class="item">Voluptate, tempora?</div>
  <div class="item">Nihil, earum?</div>
  <div class="item">Placeat, aspernatur!</div>
  <div class="item">Officia, sunt?</div>
  <div class="item">Atque, temporibus!</div>
  <div class="item">Rerum, unde!</div>
  <div class="item">Hic, molestias!</div>
  <div class="item">Et, repellat!</div>
  <div class="item">Earum, itaque.</div>
  <div class="item">Doloribus, facilis.</div>
  <div class="item">Eius, alias!</div>
  <div class="item">Est, officia.</div>
  <div class="item">Ad, porro!</div>
  <div class="item">Ipsum, voluptates.</div>
  <div class="item">Animi, eligendi.</div>
  <div class="item">Tempore, hic!</div>
  <div class="item">Voluptatibus, illum.</div>
  <div class="item">Autem, cumque!</div>
  <div class="item">Cupiditate, minus!</div>
  <div class="item">Tenetur, aliquam.</div>
</div>

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

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>

Using auto-fill to create columns in css grid

The columns are defined using the repeat() function and have a minimum width of 200px, and a maximum set to 1fr, so that they would expand and equally share any extra space when it is available. As for the number of columns per row, we’re going to use the auto-placement keywords, so that we let the browser take care of the responsiveness of the grid and will wrap the columns into new rows when needed.

The browser will place and size the columns in the first example using the auto-fill keyword. - from this website https://css-tricks.com/

what is auto-fit in grid-tempelate-columns?

repeat() => is used in grid-template-columns and grid-template-rows. It repeats the fragment according to your screen size.

auto-fit => it will fit as many columns on your screens according to your screen size.

minmax() => this function will choose a size range greater than or equal to min and less than or equal to max.which means between 300px and 1fr(fr = fractional unit default size of a column).

this line of css will create responsive columns according to your screen size and adjust the number of columns as the screen size increases or decreases

Combine repeat with auto-fit and fixed width column in a single grid-template-columns

Remove the last column from the grid template. The column template would now look like this:

grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));

Then add this:

div div:last-child {
     grid-column: -1;
     width: 50px;
}

That should work!

---

Related Topics