Kevin Powell - Community•14mo ago

How to make sure grid-template-columns with repeat minmax function doesn't create a row with 1 item?

Hi! I'm trying to create a responsive grid with 4 items in it. This results in a layout that works very fluidly on every screen size. However there are screen sizes in which one of the 4 items gets pushed to the next row [image 2]. I'm fine with pushing to the next row, but Ideally I would like this to happen in a 2x2 [image 3] layout. Is it possible to create this using just the repeat function? I would like to avoid as many media queries as possible. My code:

.parent {
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}
.child {
  grid-column: span 3;
}

.parent {
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}
.child {
  grid-column: span 3;
}

<div class="parent">
    <div class="child">Content</div>
    <div class="child">Content</div>
    <div class="child">Content</div>
    <div class="child">Content</div>
</div

<div class="parent">
    <div class="child">Content</div>
    <div class="child">Content</div>
    <div class="child">Content</div>
    <div class="child">Content</div>
</div

3 Replies

b1mind•14mo ago

Don't be scared to use media queries there is nothing wrong with it. But if you don't want your content to drop down why not just use grid-template-columns: 1fr 1fr;

b1mind•14mo ago

https://codepen.io/b1mind/pen/qBJVBWe

Brent Morton

CodePen

media queries are not bad...

...

Mathies•14mo ago

That works I guess, just wanted to know if there was a way of avoiding such things, thanks!

Gaming

Programming

How to make sure grid-template-columns with repeat minmax function doesn't create a row with 1 item?