Masonry layout with CSS only!
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about filling gaps in CSS grid layouts or getting masonry-style behavior with grid-template-rows: masonry.
Recommended by 2 people across 2 different months, 2021 to 2022.
What it is
Kevin Powell walks through the then-experimental native CSS masonry layout (grid-template-rows: masonry), which only worked in Firefox Nightly at the time. He covers the basics, spanning items, align-tracks, and a fallback built with CSS Columns.
What people said
Strong rec PsiKai · 2022-03 · Stack Overflow · on “How to make smaller items setting rows themselves?”
For your specific case, grid is trying to keep all the elements in document order, thus it is creating new rows in order to accommodate the extra space needed. That is the default behavior of grid, but you can override this by setting the parent grid-container to have the following property: grid-auto-flow: dense This will allow grid items to be displayed in the first available open grid, and will allow them to be out of document order if your layout needs it. Grid flow docs [LINK] A really great youtube content creator Kevin Powell can teach you all of the really handy, lesser known properties of flex and grid. Highly recommended to anyone trying to get better at webpage layouts: Masonry La
Recommends Yong · 2021-07 · Stack Overflow · on “How to fill the empty spaces in the grid in HTML?”
I think what you're looking for is masonry . It's a grid property that allows that exact behavior that you are looking for. It can be done with grid-template-rows:masonry; . Here [this video] is a link that would tell you exactly how you can do it.
Cites Andrew McCartney · 2021-05 · Stack Overflow · on “CSS/Masonry -> span multiple columns”
So I am excited about the new masonry feature native to CSS as of what seems like just a few months ago. I've only found one tutorial that seems to be completely up to date: here [this video] This tutorial includes a snippit on using the class feature to span 2 columns in the masonry layout. However. I cannot get his code to work simultaneously with A) the span and B) masonry layout. If I disable the grid-template-rows: masonry; , I can get his spans to work. I don't see how he did it. Furthermore, I have copied his code [LINK] and attempted to run it and had the same problem. I will add that on codepen, his class of feature doesn't span 2 columns, either. Admittedly this is only the second time