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 requiredbut 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
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...
yes i found it after thanks