17 Replies
Images get stuck in 1 row even they're overflowing
Kevin release an excellent short video on grid and flex-box yesterday , amongst other things he explained how to do just that . You may well find your answer there https://www.youtube.com/watch?v=r1IitKbJRFE
Kevin Powell
YouTube
Two simple layouts that work better with Grid
π₯Get your Simple Grid Layout Cheatsheet here: https://simple-grid-layout.kevinpowell.co/
A lot of people use flexbox because itβs simpler than grid, or at least thatβs what they tell me. From my experience, there are a lot of simple layouts that are easier with grid, and I look at two of them in this video, and just to prove my point, I compare...
checkng
so he declares counts specifically for media queries right
Basically you need to play with the
grid-template-columns
but I suggest that you watch the view as it might help you understand it better.
no, no media queries required![](https://cdn.answeroverflow.com/1111002573353263134/image.png)
but when he's using grid he's changing the count in the columns
oh he's changing
OK, that is how to change the column count, but as you mentioned flex I presumed that you wanted it to be more flexible
it worked thanks a lot
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
tried this
π
this is similar to flex-wrap right
It's similar in that it forces a new grid row when the minimum width for each column is reached
perfect
better than flexwrap
well that always depends on the use case - I think that Kevins video explains the differences and pros and cons of each method very well.
π
no you want use the auto-fit part of the video