|
|
|
|
|
|
by drinchev
2183 days ago
|
|
|
I know that the OP probably did the research, so I'm just going to ask : Isn't this possible with only CSS? I see each article ( section ) with position absolute and heavy JS calculations. My browser brain thinks that with some combo of flex-box / flex-wrap and breakpoints you could achieve this without the need for resize handler. I guess that's not the truth So can you point the struggles not doing this with CSS? |
|
|
1. The top few stories should be wider than the rest, if there’s room to do so.
2. The stories should be sorted more-or-less with the top ones near the beginning of the page.
3. Stories in a column should flow continuously—there shouldn’t be any gaps where multiple columns realign. (Bear in mind that stories can be any height, and there’s no way to precompute it.)
There’s a few ways of doing layouts that meet some of these criteria in pure CSS:
• `column-width`: Meets requirement (3), but you can’t span columns and layout is done column-by-column so the top of the page would have stories 1, 8, and 19 (or so).
• flexbox: Meets (1) and (2), but leaves unsightly alignment lines as stories can’t shift upwards to fill in gaps in the previous row.
• grid: Same problems as flexbox.
• server-side column break computation: requires the server to know how tall each story is, which (a) won’t work with a stylesheet where nearly everything is in relative sizes that depend on browser settings and (b) would probably be tricky with responsive design.
As far as I can tell, there’s no way to do a responsive “masonry” layout with items of arbitrary height in pure CSS. At the very least it was going to be tricky and frustrating to get right, and Masonry.js was already available and (after a little poking to figure out how to tell it what I wanted) did the job without any more fuss.