CODEWITHSUNDEEP
htmlcsscss-grid
Chase
Chase

Reputation: 3105

CSS Grid Template Columns Repeat No More Than X Times

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?

Upvotes: 4

Views: 6137

Answers (3)

Danny Groves
Danny Groves

Reputation: 1

I solved a similar issue by setting max-width to the grid. I had my columns as repeat(auto-fit, 150px). I wanted a max number of columns as x4 with 50px gap. So max-width of grid set to 800px.

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371231

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:

Upvotes: 3

MartinBA
MartinBA

Reputation: 797

if I understand correctly what you can do is set a media query for larger screens. Lets say you want to show a 3 column grid for screens over 992px you can use something like this

@media only screen and (min-width: 992px){
  .grid-container{
    grid-template-columns: repeat(3, 1fr);
  }
}

Let me know if that helps you! check it here https://codepen.io/anon/pen/Krzbmz

Upvotes: 2

Related Questions