Masonry layout

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Level 3 of the CSS grid layout specification defines masonry layout (also known as grid-lanes layout), which is accessed via the display values grid-lanes and inline-grid-lanes. This guide details what masonry layout is and how to use it.

Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a stacking (masonry) layout. On the stacking axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to fill the gaps.

Creating a masonry layout

To create the most common masonry layout where the columns are laid out in a grid, and the rows stack like masonry, use display: grid-lanes along with grid-template-columns.

The child elements of this container will lay out item by item along the stacking axis according to the masonry algorithm: each row of items loads into the column with the most room, causing a tightly packed layout without strict row tracks.

* {
  box-sizing: border-box;
}

body {
  font: 1.2em sans-serif;
}

.grid {
  padding: 10px;
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.item {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  color: #d9480f;
}

css

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

html

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "3.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.blockSize = itemSizes[i];
}

It is also possible to create a masonry layout with items loading into rows.

// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "2.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.inlineSize = itemSizes[i];
}

css

.grid {
  display: grid-lanes;
  gap: 10px;
  grid-template-rows: repeat(3, 100px);
}

Controlling the grid axis

On the grid axis, things will work just as you expect them to in grid layout. You can cause items to span multiple tracks while remaining in auto-placement, using the span keyword. Items may also be positioned using line-based positioning.

Masonry layout with spanning items

In this example two of the items span two tracks, and the masonry items work around them.

html

<div class="grid">
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css

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

.span-2 {
  grid-column-end: span 2;
}

This example includes an item which has positioning for columns. Items with definite placement are placed before the masonry layout happens.

html

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item positioned">positioned.</div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css

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

.positioned {
  padding: 1em;
  grid-column: 2 / 4;
}

Fallbacks for masonry layout

In browsers that do not support masonry, regular grid auto-placement will be used instead.

Specifications

Specification
CSS Grid Layout Module Level 3 # masonry-layout

Browser compatibility

css.properties.grid-template-columns.masonry

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`masonry` Experimental	Chrome – No support Chrome footnote footnote See bug 40128480	Edge – No support Edge footnote footnote See bug 40128480	Firefox – No support Firefox 77 (Release date: 2020-06-02) footnote , disabled disabled From version 77 users must explicitly set the `layout.css.grid-template-masonry-value.enabled` preference to `true`. To change preferences in Firefox, visit about:config. footnote See bug 1757446	Opera – No support Opera footnote footnote See bug 40128480	Safari – Preview support Safari TP footnote footnote See bug 248287 footnote Preview browser support	Chrome Android – No support Chrome Android footnote footnote See bug 40128480	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – No support Opera Android footnote footnote See bug 40128480	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – No support Samsung Internet footnote footnote See bug 40128480	WebView Android – No support WebView Android footnote footnote See bug 40128480	WebView on iOS – No support WebView on iOS footnote No support

Tip: you can click/tap on a cell for more information.

In development. Supported in a pre-release version.: In development. Supported in a pre-release version.
No support: No support
: Experimental. Expect behavior to change in the future.
: See implementation notes.
: User must explicitly enable this feature.

css.properties.grid-template-rows.masonry

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`masonry` Experimental	Chrome – No support Chrome footnote footnote See bug 40128480	Edge – No support Edge footnote footnote See bug 40128480	Firefox – No support Firefox 77 (Release date: 2020-06-02) footnote , disabled disabled From version 77 users must explicitly set the `layout.css.grid-template-masonry-value.enabled` preference to `true`. To change preferences in Firefox, visit about:config. footnote See bug 1757446	Opera – No support Opera footnote footnote See bug 40128480	Safari – Preview support Safari TP footnote footnote See bug 248287 footnote Preview browser support	Chrome Android – No support Chrome Android footnote footnote See bug 40128480	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – No support Opera Android footnote footnote See bug 40128480	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – No support Samsung Internet footnote footnote See bug 40128480	WebView Android – No support WebView Android footnote footnote See bug 40128480	WebView on iOS – No support WebView on iOS footnote No support

Tip: you can click/tap on a cell for more information.

In development. Supported in a pre-release version.: In development. Supported in a pre-release version.
No support: No support
: Experimental. Expect behavior to change in the future.
: See implementation notes.
: User must explicitly enable this feature.

Masonry layout

Legend

Legend