CSS Grid Lanes Polyfill Demo

Basic Photo Gallery

The classic masonry layout with auto-fill columns. Items flow into whichever column gets them closest to the top.

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Varying Column Widths

Alternating narrow and wide columns using complex repeat patterns.

.varying-cols {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) minmax(180px, 2fr)) minmax(120px, 1fr);
  gap: 12px;
}

Short

Brief content.

Medium Card

This card has a moderate amount of content that takes up more vertical space.

Tiny

Minimal.

Longer Content

This card contains significantly more text content that will cause it to be taller than some of its neighbors.

Quick

Fast read.

Extended

A more detailed description that spans multiple lines and creates visual variety.

Brief

Short.

Standard

Average length content for demonstration purposes.

Newspaper Layout with Spanning

Using grid-column: span N to create hero and featured articles.

.newspaper {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px;
}
.article.hero { grid-column: span 3; }
.article.featured { grid-column: span 2; }

Breaking: CSS Grid Lanes Revolutionizes Web Layout

The long-awaited masonry layout feature has finally arrived, bringing native support for waterfall-style layouts without JavaScript.

Technology • 5 min read

The Future of Responsive Design

How Grid Lanes changes everything we know about fluid layouts.

Design • 3 min read

Performance Gains with Native Masonry

Benchmarks show significant improvements over JavaScript solutions.

Performance • 4 min read

Quick Start Guide

Get started in minutes.

Tutorial

Browser Support Matrix

Current implementation status across browsers.

Compatibility

Migration Tips

Moving from JS masonry libraries to native CSS.

Guide

Accessibility Considerations

Ensuring your masonry layouts work for everyone.

A11y

Advanced Patterns

Complex layouts with explicit placement.

Advanced

Explicit Placement

Using negative indices to place items in specific columns (the "Special" item is placed in the last column).

.placed {
  display: grid-lanes;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.special { grid-column: -2 / -1; }

Special
(last column)

Item 1

Item 2
+more

Item 3

Item 4
+extra
+content

Item 5

Item 6
+more

Item 7

Item 8

Brick Layout (Horizontal)

Define rows instead of columns to create horizontal masonry flow.

.brick {
  display: grid-lanes;
  grid-template-rows: repeat(3, 100px);
  gap: 12px;
}

Brick 1

Brick 2 (wider)

Brick 3

Brick 4

Brick 5 (widest)

Brick 6

Brick 7

Brick 8

Brick 9

Mega Menu Footer

Perfect for navigation footers with variable-length link groups.

.mega-menu {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 32px 24px;
}