Introducing CSS Grid Lanes | WebKit

It’s here, the future of masonry layout on the web! After the foundation laid by Mozilla, years of effort by Apple’s WebKit team, and several rounds of debate in the CSS Working Group with all browsers, it is now clear how it works.

Introduction to CSS Grid Lanes.

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

Try it today in Safari Technology Preview 234.

How do grid lanes work?

Let’s learn how to create this classic layout.

First, HTML.

<main class="container">
  <figure><img src="photo-1.jpg">figure>
  <figure><img src="photo-2.jpg">figure>
  <figure><img src="photo-3.jpg">figure>
  
main>

Let’s get started by applying display: grid-lanes till main Elements for creating a grid container to create this type of layout. then we use grid-template-columns To create “lanes” with the full power of CSS Grid.

In this case, we will use repeat(auto-fill, minmax(250px, 1fr)) To create flexible columns at least 250 pixels wide. The browser will decide how many columns to create while filling all the available space.

And then, gap: 16px We get a 16 pixel gap between lanes and a 16 pixel gap between objects within the lane.

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

That’s it! In three lines of CSS, with zero media queries or container queries, we created a flexible layout that works on all screen sizes.

Think of it like a highway of cars with bumper-to-bumper traffic.

Just like a classic Masonry library, as the browser decides where to place each item, the next one is placed in the column that puts it closest to the top of the window. Like traffic, each car “changes lanes” to end up in the lane that “takes” them to the front.

This layout makes it possible for users to tab to all currently visible content in the lane, (not all the way to the bottom of the first column below the fold, and then back to the top of the second column). It also makes it possible for you to create a site that keeps loading more content as the user scrolls, without the need for JavaScript to handle the layout.

grid power

different lane sizes

Because Grid Lane uses the full power of CSS Grid to define lanes. grid-template-*It’s easy to create creative design variations.

For example, we can create a flexible layout with alternating narrow and wide columns – where both the first and last columns are always narrow, even if the number of columns varies with the viewport size. This is accomplished with grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr),

There’s a whole world of possibilities to use grid-template-* syntax.

spreading things

Since we have full power of the grid layout, we can of course spread the lanes as well.

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
  gap: 2lh;
}
article { 
  grid-column: span 1; 
}
@media (1250px < width) {
  article:nth-child(1) { 
    grid-column: span 4;             
  }
  article:nth-child(2), article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6), article:nth-child(7), article:nth-child(8) { 
    grid-column: span 2; 
  }
}

All article teasers are set in the first 1 column. Then the first item is specifically asked to span 4 columns, while the second – the 8th – is asked to span 2 columns. This creates a far more dynamic graphic design than the typical symmetrical, everything-same-width, everything-same-height layout that has dominated the last decade.

keep things

We can also place objects clearly when using grid lanes. Here, the header is always placed in the last column, no matter how many columns are present.

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
}
header {
  grid-column: -3 / -1;
}

changing directions

Yes, the lanes can go in any direction! All of the above examples create a “waterfall” shape, where content is laid out in columns. But the grid lanes can be used to create a layout in the other direction, in a “brick” layout size.

The browser automatically creates a waterfall layout when you define columns. grid-template-columnsLike this:

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

If you want the brick layout in the other direction, define rows instead grid-template-rows,

.container {
  display: grid-lanes;
  grid-template-rows: 1fr 1fr 1fr;
}

This works automatically because of a new defaultgrid-auto-flowThe normal price. Detects whether to create columns or rows based on whether you have defined using len grid-template-columns Or grid-template-rows,

The CSS Working Group is still discussing which property will explicitly control flow orientation, and what its syntax will be. The debate is over on whether to reuse or not grid-auto-flow or create new properties like grid-lanes-directionIf you are interested in reading or expressing your views about the options being considered, check out this discussion,

However, since normal Either way there will be an initial value, you do not need to wait for this decision to learn the grid lanes. When you define only one direction – grid-template-rows Or grid-template-columns – It Will Just Work™. (If it doesn’t, check grid-auto-flow Is set to a contradictory value. you canunset This if necessary.)

placement sensitivity

“Tolerance” is a new concept created for grid lanes. This lets you adjust how appropriate the layout algorithm is when deciding where to place items.

See next drawing. Note that car 4 is slightly smaller than car 1. When the “tolerance” is zero, car 6 ends up in the rightmost lane, while car 7 is in the leftmost lane. Car 6 ends up behind car 4 on the right as it moves a little closer to “down the road” (closer to the top of the grid container). Car 7 then takes the next position from the top, and ends up behind Car 1 on the left. Final result? The first horizontal grouping of the contents is 1, 2, 3, 4 and the next is 7, 5, 6.

But the difference in length between car 1 and car 4 is very less. Car 6 is not meaningfully close to the top of the page. And placing item 6 on the right, item 7 on the left is an unexpected experience – especially for users who are tabbing through content, or when content order is labeled somehow.

These small differences in size do not matter in any practical sense. Instead, the browser should consider item sizes such as car 1 and car 4. That’s why for default item-tolerance Is 1em – which means that only a difference in material length of more than 1 em will matter in figuring out where the next item goes.

If you want the layout of the items to move around less, you can set a higher value for item-toleranceIn the next digram, the tolerance is set to half-car, allowing cars to drive natively from left to right and only move into the other lane to avoid extra-long limos, Now, the horizontal groups of ingredients are 1, 2, 3, 4 and 5, 6, 7,

Think about tolerance in terms of how quiet you want car drivers to be. Will they change lanes just to go a few inches ahead? Or will they move only when there is plenty of space in the other lane? The amount of space you want them to care about is the amount you’ve set aside item-tolerance,

Remember that people tabbing to the page will see each item highlighted as it comes into focus, and they may be experiencing the page through a screenreader. Item tolerances set too high can create an awkward experience jumping up and down in the layout. An item tolerance that is too low may result in more jumping back and forth in the layout than necessary. adjust item-tolerance Something suitable for the size and shape variations of your content.

Currently this property name is item-tolerance In the specification and in Safari Technology Preview 234. However, there is still a possibility that this name will change, perhaps something like flow-tolerance Or pack-toleranceIf you have any preference or idea for a better name, you can tell us here, Keep an eye on updates about the last name before using this property on production websites,

try it out

Try Grid Lanes in Safari Technology Preview 234! All demos at webkit.org/demos/grid3 have been updated with the new syntax, including other use cases for grid lanes. It’s not just for images! For example, a mega menu footer full of links suddenly becomes easier to layout.

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}

What will happen next?

The CSS Working Group has some final decisions to make. But overall, the feature described in this article is ready to use. It’s time to try it. And finally it’s safe to store the basic syntax in memory!

We’d love for you to create some demos! Showcase what new use cases you can imagine. And let us know about any bugs or potential fixes you discover. Ping Jen Simmons at Bluesky or Mastodon with links, comments and ideas.

Our team has been working on this since mid-2022, implementing in WebKit and writing web standards. We can’t wait to see what you do with it.