masonry-auto-flow

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

The masonry-auto-flow CSS property modifies how items are placed when using masonry in CSS Grid Layout.

Syntax

/* Keyword values */
masonry-auto-flow: pack;
masonry-auto-flow: next;
masonry-auto-flow: ordered;
masonry-auto-flow: definite-first;
masonry-auto-flow: next ordered;

/* Global values */
masonry-auto-flow: inherit;
masonry-auto-flow: initial;
masonry-auto-flow: unset;

This property may take one of two forms:

  • A single keyword: one of pack, next, definite-first, or ordered
  • Two keywords, for example next ordered.

Values

pack
As per the default masonry algorithm, items will be placed into the track with the most room.
next
Items will be placed one after the other in the grid axis.
definite-first
Display as in the default masonry algorithm, placing items with a definite place first before placing other masonry items.
ordered
Ignore any items with a definite placement, and place everything according to order-modified document order.

Formal definition

Value not found in DB!

Formal syntax

Syntax not found in DB!

Examples

Using the next keyword

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="flow">
  <option value="pack">pack</option>
  <option value="next">next</option>
</select>

CSS

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  masonry-auto-flow: pack;
}

#item1 {
  background-color: lime;
  height: 2em
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
  height: 3em;
}

#item4 {
  background-color: red;
  height: 2.5em;
}

#item5 {
  background-color: aqua;
  height: 4em;
}
const selectElem = document.querySelector('select');

function changeMasonryFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("flow");
  var masonryAutoFlow = direction.value === "pack" ? "pack" : "next";

  grid.style.masonryAutoFlow = masonryAutoFlow;
}

selectElem.addEventListener('change', changeMasonryFlow);

Result

Specifications

Specification Status Comment
CSS Grid Layout Module Level 3
The definition of 'masonry-auto-flow' in that specification.
Editor's Draft Initial definition

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

No compatibility data found. Please contribute data for "css.properties.masonry-auto-flow" (depth: 1) to the MDN compatibility data repository.

See also