How to make grid go next row like flex-wrap of flexbox?

.gallery-page {
display: grid;
grid-template-columns: auto;
grid-auto-flow: column;
gap: 2rem;
margin: 2rem;
width: 100%;
height: 100%;
img {
}
}
.gallery-page {
display: grid;
grid-template-columns: auto;
grid-auto-flow: column;
gap: 2rem;
margin: 2rem;
width: 100%;
height: 100%;
img {
}
}
17 Replies
Mert Efe
Mert EfeOP2y ago
Images get stuck in 1 row even they're overflowing
Chris Bolson
Chris Bolson2y ago
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...
Mert Efe
Mert EfeOP2y ago
checkng so he declares counts specifically for media queries right
Chris Bolson
Chris Bolson2y ago
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
Mert Efe
Mert EfeOP2y ago
Mert Efe
Mert EfeOP2y ago
but when he's using grid he's changing the count in the columns oh he's changing
Chris Bolson
Chris Bolson2y ago
OK, that is how to change the column count, but as you mentioned flex I presumed that you wanted it to be more flexible
Mert Efe
Mert EfeOP2y ago
it worked thanks a lot grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); tried this
Chris Bolson
Chris Bolson2y ago
👍
Mert Efe
Mert EfeOP2y ago
this is similar to flex-wrap right
Chris Bolson
Chris Bolson2y ago
It's similar in that it forces a new grid row when the minimum width for each column is reached
Mert Efe
Mert EfeOP2y ago
perfect better than flexwrap
Chris Bolson
Chris Bolson2y ago
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.
Mert Efe
Mert EfeOP2y ago
👍
Mannix
Mannix2y ago
no you want use the auto-fit part of the video
Mannix
Mannix2y ago
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...
Mert Efe
Mert EfeOP2y ago
yes i found it after thanks
Want results from more Discord servers?
Add your server