This is an experimental technologyCheck 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
, orordered
- 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 3The 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
- Related CSS properties:
align-tracks
,justify-tracks
masonry-auto-flow by Mozilla Contributors is licensed under CC-BY-SA 2.5.