"In that same GitHub thread, you'll read that Tab Atkins-Bittner shared a "hacky" way to go about it with CSS Grid. You can have Grid do Masonry if you know the heights of the items ahead of time. It's a bit hacky, but you set the grid container to grid: auto-flow dense 1px / <column widths here>;, then set each item to grid-row: span <pixel height as integer>; (for example, if the item is 50px tall, use grid-row: span 50;)."
"Currently the closest you can get with CSS to this type of layout is to use multi-col however, the items then flow top to bottom rather than across the rows. This feels more like a behaviour of flexbox than grid, as the solution is very much based on the size of the items. Opening this in order to record the feature request/use case for future discussion."
Masonry layout has been standardized as display: grid-lanes. Early attempts struggled because flexbox and multi-column approaches cause items to flow top-to-bottom rather than across rows, and existing hacks require knowing item heights in advance. One grid hack used grid: auto-flow dense 1px combined with grid-row span values equal to pixel heights, but that approach is fragile and impractical for many authors. Proposals to use grid-template-rows or grid-template-columns with a flow value were not viable. The new grid-lanes approach aims to provide a usable, beginner-friendly CSS solution for masonry layouts.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]