Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout – WebKit

• csswg-drafts

  70 4,278 9.9 Bikeshed

  CSS Working Group Editor Drafts

  

For more background, and some detailed discussion of the opposite argument ("display: masonry" over "display:grid"+"grid-template-rows: masonry") see https://github.com/w3c/csswg-drafts/issues/9041

• css-houdini-drafts

  3 1,836 6.6 Bikeshed

  Mirror of https://hg.css-houdini.org/drafts

  

I'm dubious that a constraints system would ever be considered, CSS has so far had some strong goals around it's predictably on layout cost.. that said, Houdini layout proposal is the closest to your comment, offloading layout to an isolated js context https://github.com/w3c/css-houdini-drafts/blob/main/css-layo... .. but honestly flex and grid, plus other things like containment have solved so many things for folks now that there's just far less demand for improvement than the days before flex

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• Masonry

  41 16,238 0.0 HTML

  :love_hotel: Cascading grid layout plugin (by desandro)

Probably influenced by the most popular JavaScript library for achieving this type of layout, Masonry[0]. The author notes at the end of the article:

> But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”.

[0] https://masonry.desandro.com/

• gridstack.js

  7 5,877 9.1 TypeScript

  Build interactive dashboards in minutes.

  

Can you add drag and drop to this? Currently you need libraries like https://gridstackjs.com/, especially for nested cases.

• cassowary.js

  2 1,678 10.0 JavaScript

  Cassowary/JS, better, faster, future-ready

Constraint-based layout using the Cassowary algorithm seemed like a popular alternative for a while (see https://github.com/slightlyoff/cassowary.js/?tab=readme-ov-f...). It’s designed to solve for variance in screen size and shape. Apple switched to Swift UI and may have moved on from this approach.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

Suggest a related project