Introducing the Field Guide to Grid Lanes

This week, we launched the Field Guide to Grid Lanes at gridlanes.webkit.org.

Field Guide to Grid Lanes website header

If you ever bookmarked the CSS Tricks Complete Guide to Flexbox, HTML5 Rocks, or CSS Zen Garden, a guide like this might feel familiar. It’s designed to be an easy introduction, a reference guide — and just plain fun.

The interactive playground

At the top is a live, editable Grid Lanes layout. Switch between Waterfall and Brick. Try preset layouts. Drag the slider labeled “Flow tolerance” and click “Play tab order” to understand the impact of flow-tolerance.

Interactive drawing of website with items laid out with Grid Lanes. Multiple buttons, sliders, and a code editor make it possible to try out many combinations quickly & see the results.

Resize the demo browser window to test responsive behavior without resizing your whole window. Edit the CSS directly. Copy the code you create.

The cheat sheet

Next is the Field Guide itself — a single-page reference for every property, value, and option.

Screenshot of first part of the reference guide, showing lots of definitions, little diagrams, and tiny code snippets

It has four sections:

Grid Lanes Basics — display: grid-lanes, plus the difference between waterfall and brick layouts
Options for Lane Definitions — Grid track-sizing with fr units, fixed lengths, percentages, auto, min-content & max-content, fit-content(), minmax(), repeat(), and auto-fill vs auto-fit
Options for Placement & Spacing — flow-tolerance, gap, spanning tracks, and explicit placement
Good to Know — info about source order, progressive enhancement, and switching layouts at different breakpoints

The demos

To showcase the possibilities of Grid Lanes, we created six demos, each available in several variations:

The six demos listed on the homepage — with a screenshot of each.

Photos — just images, in a variety of aspect ratios
Recipes — components containing both flexible images and varying lengths of text
Newspaper — longer passages of text, with a few images (and a lot of CSS puns)
Mega Menu — lists of very short text
Timeline — text in brick layout
Pinboard — mixed media

Each demo opens with a floating control panel.

Screenshot of one of the demos, happens to be of photo layout. The controls are showing, as described in the article.

“Layout” offers a dropdown of variations — showing off what Grid Lanes can do, and comparing it to Flexbox, Multicolumn, and Grid. “Numbers” shows item order. “Flow tolerance” lets you experiment with its effects. The code panel displays the key layout CSS.

“Hide controls” puts the focus on the demo itself. To get the controls back, click the gear that appears in the lower-right corner.

Working with Safari’s developer tools

Web Inspector knows about Grid Lanes, too. Toggle “Order Numbers” to reveal overlays marking the DOM order of items. These numbers are extremely useful when experimenting to find the best flow-tolerance value for your content.

Screenshot of photo demo, with Web Inspector open. The Grid Inspector is showing, with Item numbers are turned on. This creates lines all over the webpage, revealing the Grid Lanes layout, and marking each Item with a number.

Learn more by reading New Safari developer tools provide insight into CSS Grid Lanes.

What about other browsers?

Grid Lanes works today in Safari 26.4+. For the latest information about other browsers, check Can I Use. For progressive enhancement guidance, read When will CSS Grid Lanes arrive? How long until we can use it?

Made by the people who shipped it

The Field Guide was built by the same team behind Grid Lanes. We hope this is a fun experience that makes Grid Lanes easy to learn. Bookmark it, share it with colleagues, and let us know what you make.

Visit the Field Guide →

Feedback

We’d love to hear from you. Find us online: Jen Simmons on Bluesky / Mastodon, Saron Yitbarek on Bluesky / Mastodon, and Jon Davis on Bluesky / Mastodon. You can follow WebKit on LinkedIn.