@jensimmons I think the thing I thought I understood but according to your demos I clearly do not… How do I predict which column an element will fall?
In my head, I thought (given L-R/T-B std. western orientation) that the content would propagate left to right, and would 'float' to abut the element above it. (ex: 4 columns, elements 1,2,3,4… element 5 will always appear under element 1, regardless of 1's height, 6 under 2, etc.)
But this doesn't seem to be the case according to your demo.
@jensimmons I’m not a professional, and only do CSS occasionally, and I’m probably just an idiot, but I find grid and flex difficult to understand, remember, and execute, and this adds even more complexity. My previous site used JS to get vertical masonry, but my current one uses columns to get some of the effects you show with grids: https://johnconway.art
Honestly, I’d be happy with “column-content-stacking: horizontal” or something simple like that.
@jensimmons "Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it."
With all due respect, it sounds like these people don't talk to designers and developers enough (or at all). I, for one, would use this as soon as it becomes available. I have been waiting for this for years and know many others who have too.
@SaraSoueidan@jensimmons Also “well known websites might not use it”? Holy hell this angle. We are only allowed to have what “big website” might find popular? Ok, and is Big Website reflective of the needs and uses of the majority of the internet? No. Christ on a bike this sounds so bad.
Was the internet and web about empowering people as individuals to express themselves and learn, or was it about building platform features to service Business?
@jensimmons the thing that is always a bit odd about masonry layouts is the choice of column for a given content block is unpredictably dependent on the aspect ratios of previously flowed blocks. The zooming when clicked on example illustrates this with a very confusing animation of pieces shuffling around, and the variable column width examples without span do too, as its wholly arbitrary how wide a given block is. The spanning examples are a good mitigation of this.
@jensimmons there is a related issue that is hard to solve with existing grid, which is illustrated by the Tufte layout, https://edwardtufte.github.io/tufte-css/ where you have associated content - footnotes, sidenotes, illustrations, other marginalia, that you want to be vertically aligned with the text, but with the possibility of spanning more columns.
Masonry is doing a different thing, without keeping this alignment; float was a way to approximate this; is there a good way to express this in grid?
@KevinMarks I don’t think masonry-style layouts are anywhere close to this kind of layout. That looks to me like Grid 1 (maybe with subgrid).
The wider images/content is easy. Just span certain elements across 1 column while the bigger stuff spans 2. The Footnotes that sit to the side... I'd have to code a demo to make sure it would work, but I think it’s possible in grid 1 or 2. There might be some configuration needed on the backend to mark up content with certain classes.
@KevinMarks It'd also depend on what you would want for the "mobile" / narrow layout. Would you want all the footnotes at the end? Or inline? What is the best experience for a screenreader? Footnotes at the end? Or inline? The answers to those questions will determine the DOM/HTML order. And the HTML order determines how to write the CSS for layout...
It looks like that site uses inline content marked up with <span class="marginnote">. Interesting. I'd recommend proper HTML elements instead.
@jensimmons I've worked with CSS for what, twenty years, and been a web dev since 1995. Yes, we want this. Masonry layout would solve so many problems for my art and photography websites. Even today I had to fire up Gimp to resize photos for different aspect ratios.
@jensimmons great article. Small typo near the end: because none is the default value for grid-temple-* and means “please give me only implicit rows, no explicit ones”. I think that temple should be template
Here’s another, where I’m using max-content sizing of my columns to make sure the text never wraps.
It was demos like this that convinced me that this is not just “masonry”. This is a way to use CSS Grid, but turn off the rows. And for the first time to have columnar grids on the web, not just modular ones.
And check this out. Otherwise boring text is not so boring when you can use a columnar grid, and are no longer forced to truncate content to make it fit into regimented-sized boxes.
And as I write in the article, we need your input to help the CSS Working Group decide whether or not this is the direction in which they want to go.
Read to the end of the article where I describe what kind of input would be most helpful and where to go to provide it. People won't see a bunch of posts on social media. If you'd like Grid Level 3 to be a reality, post our comments here: https://github.com/w3c/csswg-drafts/issues/10233
@armstrong There are two issues — one about the name, linked in the "P.S." at the very end. And just about that, in the section, "We want to hear from you" is a link to where you can comment in general.
Add comment