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 Efeβ€’16mo ago
Images get stuck in 1 row even they're overflowing
Chris Bolson
Chris Bolsonβ€’16mo 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 Efeβ€’16mo ago
checkng so he declares counts specifically for media queries right
Chris Bolson
Chris Bolsonβ€’16mo 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 Efeβ€’16mo ago
Mert Efe
Mert Efeβ€’16mo ago
but when he's using grid he's changing the count in the columns oh he's changing
Chris Bolson
Chris Bolsonβ€’16mo 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 Efeβ€’16mo ago
it worked thanks a lot grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); tried this
Chris Bolson
Chris Bolsonβ€’16mo ago
πŸ‘
Mert Efe
Mert Efeβ€’16mo ago
this is similar to flex-wrap right
Chris Bolson
Chris Bolsonβ€’16mo ago
It's similar in that it forces a new grid row when the minimum width for each column is reached
Mert Efe
Mert Efeβ€’16mo ago
perfect better than flexwrap
Chris Bolson
Chris Bolsonβ€’16mo 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 Efeβ€’16mo ago
πŸ‘
Mannix
Mannixβ€’16mo ago
no you want use the auto-fit part of the video
Want results from more Discord servers?
Add your server