## 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;
    }