Jen Simmons , Saron Yitbarek, Elika Etemad and Brandon Stewart

Item Flow, Part 1: A new unified concept for layout

https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/

As we worked through the details, we started to get excited. Suddenly new features for Flexbox and Grid that people have wanted for years had an obvious home. Things seemed to click together elegantly. New capabilities emerged

This is really an exciting development for CSS layout!

Ok, I first liked display: masonry, then agreed masonry layout should be based on Grid, and now I find this new option even better… 😅

Anyway, like I said earlier, I generaly don't like masonry layout at all.

But I'm really looking forward to being able to write item-pack: balance; and throw away this silly JavaScript solution. 😍

• Older: Reimagining Fluid Typography
• Newer: Defending Tailwind

Related contents with similar topics

1. 

   Ahmad Shadeed

   Should masonry be part of CSS grid?

   • Nicolas Hoizey
   • 31 October 2024
   • CSS, Grid, Masonry
   • 9 reactions

   An exploration of examples showing masonry as both a part of CSS Grid and as its own display type. Ahmad provides compeling use cases and code examples…

2. 

   Rachel Andrew

   Masonry and good defaults

   • Nicolas Hoizey
   • 21 September 2024
   • CSS, Masonry, Grid
   • 1 reaction

   The thing with switching to a new formatting context, as we do with flex and grid layouts, is that the minute you use display: flex or `display:…

3. 

   Miriam Suzanne

   Learn Grid Now, Container Queries Can Wait

   • Nicolas Hoizey
   • 19 August 2024
   • CSS, Grid
   • 7 reactions

   There’s no rush to rip out all your media queries, and replace them with containers. You’ll be fine waiting for widely available support and your…

4. Note from 23 November 2023

   • Nicolas Hoizey
   • 23 November 2023
   • CSS, Grid, MDN
   • 4 reactions

   I wonder if MDN could add screenshots of the live examples, so people can see the result even if their browser doesn't support a feature yet.

   For example for CSS Grid masonry layout:
   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout

   I'm using Firefox, so I had to activate the layout.css.grid-template-masonry-value.enabled flag to see the “good” result.

5. 

   Josh W. Comeau

   An Interactive Guide to CSS Grid

   • Nicolas Hoizey
   • 23 November 2023
   • CSS, Grid
   • 10 reactions

   In this tutorial, I'm going to share the biggest 💡 lightbulb moments I've had in my own journey with CSS Grid. You'll learn the fundamentals of this…