This directory contains sample pages showing how to use CSS Grid Lanes, also known as CSS Masonry.
To test CSS Grid Lanes in Microsoft Edge, and other Chromium-based browsers, enable the feature:
-
Use a the latest version of Microsoft Edge, or an other Chromium-based browser.
-
Open a new tab or window, and go to the
about://flagspage. -
Enter CSS Grid Lanes Layout in the Search flags text box, at the top of the page.
The list of flags is filtered to only show the CSS Grid Lanes Layout flag.
-
Under the CSS Masonry Layout flag section, set the dropdown to Enabled.
-
Restart the browser.
| Sample | Description | Screenshot |
|---|---|---|
| New York City photos | A photo gallery with explicit placement and lane spanning. |  |
| News site - The Daily Oddity | A news site layout with auto-placed, densely packed, articles, and column spanning. |  |
| Kanban board | A kanban board, with sticky notes explicitly placed in column lanes, combined with view transitions. |  |
| Nature photos | Nature photo gallery showcasing multiple column lane size options |  |
| Blog | A blog layout |  |
| Scroll-triggered entry animation | A photo gallery with scroll-triggered entry animations. |  |
| Col.or Studies | Artwork portfolio page with a dynamic layout. |  |
| Infinite loading board | Infinite loading text and photo board. |  |
| Toggle layout direction | A photo gallery with toggleable layout direction. |  |
| Example | Description |
|---|---|
| Same size columns | Use the grid-template-columns property to create a equal size column lanes. |
| Same size rows | Use the grid-template-rows property to create a equal size row lanes. |
| Custom lane sizes | Use the grid-template-columns and grid-template-rows properties to create custom sized lanes. |
| Intrinsic lanes | Use `repeat(auto-fill, auto) to create lanes that are sized to fit their content. |
| Grid-lanes shorthand | Use the grid-lanes shorthand property to set lane sizes, line names, and layout orientation in a single declaration. |
| Lane spanning | Use grid-column or grid-row with the span keyword to make items span multiple lanes. |
| Flow tolerance | Use the flow-tolerance property to find the right balance between even columns and DOM order preservation. |
- Masonry layout at MDN.
- Brick by brick: Help us build CSS Masonry at developer.chrome.com.
- CSS Grid Layout Module Level 3 (specification).