2026 DesignSafari & Web
WWDC26 · 10 min · Design / Safari & Web
Learn CSS Grid Lanes
Build adaptive web layouts that embrace content of all shapes and sizes. Explore how Grid Lanes lets you arrange differently-shaped elements into clean, flexible designs with simple CSS. And find out how flow-tolerance helps you refine accessibility while keeping your layouts malleable.
Watch at developer.apple.com ↗Chapters
Code shown on screen · 17 snippets
Create a Grid Lanes Container
.container {
display: grid-lanes;
}Create a Grid Lanes Container
.container {
display: grid-lanes;
grid-template-columns: repeat(3, 1fr);
}Create a Grid Lanes Container
.container {
display: grid-lanes;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}Implement a Brick Variation
.container {
display: grid-lanes;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}Implement a Brick Variation
.container {
display: grid-lanes;
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}Experiment with different layouts
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}Experiment with different layouts
.container {
display: grid-lanes;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}Experiment with different layouts
.container {
display: grid-lanes;
grid-template-columns:
repeat(auto-fill,
minmax(200px, 1fr));
gap: 10px;
}Experiment with different layouts
.container {
display: grid-lanes;
grid-template-columns:
repeat(auto-fill,
minmax(8rem, 1fr)
minmax(14rem, 2fr);
gap: 10px;
}Control Individual Items
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}Control Individual Items
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item {
grid-column: span 2;
}Control Individual Items
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item {
grid-column: 2 / span 2;
}Integrate Subgrid
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item {
grid-column: span 2;
}Integrate Subgrid
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item {
display: grid-lanes;
grid-template-columns: subgrid;
grid-column: span 2;
}Integrate Subgrid
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
}Improve item positioning
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr;
gap: 10px;
flow-tolerance: normal;
}Improve item positioning
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr;
gap: 10px;
flow-tolerance: 2.1em;
}Resources
Related sessions
-
17 min -
10 min