KPC
Kevin Powell - Community•2y ago
Mathies

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
[2]
[1]
[3]
3 Replies
b1mind
b1mind•2y 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
b1mind•2y ago
Mathies
MathiesOP•2y ago
That works I guess, just wanted to know if there was a way of avoiding such things, thanks!

Did you find this page helpful?