CSS Grid Template Columns Repeat No More Than X Times

Question

I have a layout in which multiple items will be aligned in a grid. Let's use the following as an example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  display: block;
  width: 100%;
  background-color: purple;
  color: white;
  text-align: center;
  padding: 30px 5px;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

In the above code, the grid will repeat 3 columns per row and each item will expand to 1/3 of the row width. The problem is that in a responsive situation, the grid will always repeat 3 columns.

If I change the repeat value to auto-fit and adjust the column sizing to use minmax I can control how the page scales down and reduce the col width and count to some sane value. So adjusted code would look something like this:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-gap: 20px;
}

.grid-item {
  display: block;
  width: 100%;
  background-color: teal;
  color: white;
  text-align: center;
  padding: 30px 5px;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

This works well scaling down, but here is where I am having problems - I want to cap the number of cols at 3 when the page scales up. Ideally, I would like to use minmax in the repeat directive like this:

grid-template-columns: repeat( minmax(1, 3), minmax(300px, 1fr) );

but of course this doesn't work. How can I limit repeat to 3 columns while still maintaining my downscale settings with auto-fit?

Answer 1

I don't think you can set a max-limit on the number of columns using auto-fit or auto-fill. By definition, they will create as many tracks as can fit in the container without overflowing:

§ 7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

When auto-fill [or auto-fit] is given as the repetition number ... then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

And you can't set the max value of the minmax() function to 30%, because then you run into the same problem you had in your first example:

grid-template-columns: repeat(3, 1fr)

Namely, the column tracks become fixed on all screen sizes, and the layout is not responsive.

I understand that you're looking for a solution that doesn't require media queries. But if you want to use grid layout, I think media queries may be your best bet.

Otherwise, consider flex layout:

jsFiddle demo

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 30%;
  min-width: 300px;
  flex-grow: 1;
  background-color: teal;
  color: white;
  text-align: center;
  padding: 30px 5px;
  border: 5px solid white;
}

* {
  box-sizing: border-box;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

If you go the flex route, then read this post, too:

• Targeting flex items on the last row