Skip to content

Make Grid Lanes canonical and Masonry redirect #4225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jdatapple wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Make Grid Lanes canonical and Masonry redirect #4225

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1473a7
Make grid Lanes canonical with masonry redirecting
jdatapple Aug 4, 2026
1e6782b
Merge branch 'main' into jdatapple/css-grid-lanes
jdatapple Aug 4, 2026
0603856
Fix CSS Grid 3 data
jdatapple Aug 4, 2026
a60ec8d
Addressed feedback
jdatapple Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion features/display-grid-lanes.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
kind: moved
redirect_target: masonry
redirect_target: grid-lanes
2 changes: 1 addition & 1 deletion features/display-grid-lanes.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Generated from: display-grid-lanes.yml
# This file intentionally left blank.
# Do not edit this file.
# The data for this feature has moved to masonry.yml
# The data for this feature has moved to grid-lanes.yml

{}
17 changes: 10 additions & 7 deletions features/draft/spec/css-grid-3.yml
View file
Open in desktop

@ddbeck ddbeck Aug 24, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The features/draft/spec folder files are generated and don't need to be updated by hand. If you drop the changes to those files from your PR, you'll eliminate some conflicts and guarantee that there will be no future conflicts with those files.

Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
draft_date: 2026-05-08
draft_date: 2026-08-04
name: CSS Grid Layout Module Level 3
description: TODO
spec: https://drafts.csswg.org/css-grid-3/
compat_features:
- css.properties.display.grid-lanes
- css.properties.display.inline-grid-lanes
- css.properties.flow-tolerance
- css.properties.flow-tolerance.infinite
- css.properties.flow-tolerance.normal
- css.properties.grid-area.auto
- css.properties.grid-auto-columns.auto
- css.properties.grid-auto-columns.max-content
Expand Down Expand Up @@ -67,9 +62,17 @@ compat_features:
# - css.properties.column-gap.multicol_context
# - Flexbox gap:
# - css.properties.column-gap.flex_context
# - Masonry:
# - Grid lanes:
# - css.properties.display.grid-lanes
# - css.properties.display.inline-grid-lanes
# - css.properties.flow-tolerance
# - css.properties.flow-tolerance.infinite
# - css.properties.flow-tolerance.normal
# - css.properties.grid-template-columns.masonry
# - css.properties.grid-template-rows.masonry
# - Grid animation:
# - css.properties.grid-template-columns.animation
# - css.properties.grid-template-rows.animation
# - Subgrid:
# - css.properties.grid-template-columns.subgrid
# - css.properties.grid-template-rows.subgrid
14 changes: 11 additions & 3 deletions features/draft/spec/css-grid-3.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,17 @@
# Do not edit this file by hand. Edit the source file instead!

status:
baseline: false
baseline: high
baseline_low_date: 2020-07-28
baseline_high_date: 2023-01-28
support:
safari: "26.4"
safari_ios: "26.4"
chrome: "57"
chrome_android: "57"
edge: "16"
firefox: "70"
firefox_android: "79"
safari: "11"
safari_ios: "11"
compat_features:
# baseline: high
# baseline_low_date: 2017-10-17
Expand Down Expand Up @@ -41,6 +48,7 @@ compat_features:
- css.properties.grid-auto-columns.auto
- css.properties.grid-auto-rows.auto

# ⬇️ Same status as overall feature ⬇️
# baseline: high
# baseline_low_date: 2020-07-28
# baseline_high_date: 2023-01-28
Expand Down
15 changes: 13 additions & 2 deletions features/grid-lanes.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,13 @@
kind: moved
redirect_target: masonry
name: Grid lanes
description: "The `display: grid-lanes` or `display: inline-grid-lanes` CSS declaration creates a layout where items are tightly packed layout in parallel lanes. Items are placed one by one in the lane that has the most available space. Also known as masonry."

@ddbeck ddbeck Aug 24, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

copy editing nits

Suggested change
description: "The `display: grid-lanes` or `display: inline-grid-lanes` CSS declaration creates a layout where items are tightly packed layout in parallel lanes. Items are placed one by one in the lane that has the most available space. Also known as masonry."
description: "The `display: grid-lanes` and `display: inline-grid-lanes` CSS declarations create a layout where items are tightly packed in parallel lanes. Items are placed one by one in the lane that has the most available space. Also known as masonry."

spec: https://drafts.csswg.org/css-grid-3/
group: layout
caniuse: css-grid-lanes
compat_features:
- css.properties.display.grid-lanes
- css.properties.display.inline-grid-lanes
- css.properties.flow-tolerance
- css.properties.flow-tolerance.infinite
- css.properties.flow-tolerance.normal
- css.properties.grid-template-columns.masonry
- css.properties.grid-template-rows.masonry

@Elchi3 Elchi3 Aug 11, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've opened a BCD PR to remove these two keys mdn/browser-compat-data#30183

Suggested change
- css.properties.grid-template-columns.masonry
- css.properties.grid-template-rows.masonry

@ddbeck ddbeck Aug 24, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change has landed in BCD, so this suggestion ought to be applied and the dist files regenerated.

16 changes: 12 additions & 4 deletions features/grid-lanes.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
# Generated from: grid-lanes.yml
# This file intentionally left blank.
# Do not edit this file.
# The data for this feature has moved to masonry.yml
# Do not edit this file by hand. Edit the source file instead!

{}
status:
baseline: false
support: {}
compat_features:
- css.properties.display.grid-lanes
- css.properties.display.inline-grid-lanes
- css.properties.flow-tolerance
- css.properties.flow-tolerance.infinite
- css.properties.flow-tolerance.normal
- css.properties.grid-template-columns.masonry
- css.properties.grid-template-rows.masonry
7 changes: 2 additions & 5 deletions features/masonry.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
name: Masonry
description: "The `display: grid-lanes` or `display: inline-grid-lanes` CSS declaration creates a layout where items are tightly packed, like brickwork, in parallel lanes. Items are placed one by one in the lane that has the most available space."
spec: https://drafts.csswg.org/css-grid-3/
group: layout
caniuse: css-grid-lanes
kind: moved
redirect_target: grid-lanes
11 changes: 4 additions & 7 deletions features/masonry.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
# Generated from: masonry.yml
# Do not edit this file by hand. Edit the source file instead!
# This file intentionally left blank.
# Do not edit this file.
# The data for this feature has moved to grid-lanes.yml

status:
baseline: false
support: {}
compat_features:
- css.properties.grid-template-columns.masonry
- css.properties.grid-template-rows.masonry
{}
Loading