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:
3 Replies
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;
That works I guess, just wanted to know if there was a way of avoiding such things, thanks!