Native masonry is almost here
Masonry Grid Lanes uses native layout when the browser supports it, with a JavaScript fallback elsewhere.
Masonry Grid Lanes has arrived: a web component with a “native-first” approach. It first tries to use native masonry through the Grid Lanes API, and if the browser does not support it, it gracefully falls back to JS.
What it actually does:
- Checks browser support
- Native support available → use it
- No native support → enable the JS layout
- On the outside, it is just a custom element
- Includes Pretex support
<masonry-grid-lanes min-column-width="280" gap="16" text-metrics="pretext">
<div>...</div>
<div>...</div>
</masonry-grid-lanes>A good example of progressive enhancement: write as if the platform can already do it, without breaking things where it has not caught up yet.