Skip to content

Commit d42f4e1

Browse files
committed
[css-grid-2] Added issue for masonry layout.
1 parent 6ee0ae6 commit d42f4e1

1 file changed

Lines changed: 39 additions & 0 deletions

File tree

css-grid-2/Overview.bs

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,3 +189,42 @@ Subgrids</h2>
189189
Since <a>subgrids</a> can be placed before their contents are placed,
190190
their lines automatically receive the line names specified on the parent <a>grid</a>.
191191
</ul>
192+
193+
<!-- Big Text: masonry -->
194+
195+
<h2 id=masonry>
196+
Masonry Layout</h2>
197+
198+
<div class=issue>
199+
People have been trying to use CSS for <a href="https://github.com/w3c/csswg-drafts/issues/1009#issuecomment-278095001">masonry layouts</a> for over a decade,
200+
and it doesn't seem to have slowed,
201+
so it's probably not just a layout fad.
202+
Would probably be worthwhile to address officially.
203+
204+
As far as I can tell,
205+
this is best done as a Grid feature;
206+
some of the features I've seen in masonry libraries
207+
(like large items spanning multiple masonry tracks)
208+
make Flexbox inappropriate.
209+
This also would reuse *so many* Grid features
210+
that it would be a shame to put together a brand new layout spec for it.
211+
212+
No clue what it would look like yet, tho.
213+
In handwavey terms, it's a grid that's only gridded
214+
"in one dimension",
215+
and free-flows in the other,
216+
with auto-flow.
217+
218+
Note that this is actually 100% possibly with Grid today,
219+
if your items are of known height,
220+
by making thousands of 1px tall rows,
221+
and setting the items' row-span to be equal to their height in px.
222+
(Or some lower-res multiple, like 10px rows.)
223+
Dense row auto-flow then magically makes Masonry happen.
224+
This is just a terrible hack that runs into memory/CPU issues
225+
due to the large number of rows.
226+
It suggests, tho,
227+
that making it work properly
228+
is mostly a matter of relaxing some constraints,
229+
rather than adding entirely new behavior.
230+
</div>

0 commit comments

Comments
 (0)