/* 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: revert; masonry-auto-flow: unset; 

masonry-auto-flow

Experimental: 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: revert; masonry-auto-flow: unset; 

This property may take one of two forms:

Values

As per the default masonry algorithm, items will be placed into the track with the most room.

Items will be placed one after the other in the grid axis.

Display as in the default masonry algorithm, placing items with a definite place first before placing other masonry items.

Ignore any items with a definite placement, and place everything according to order-modified document order.

Formal definition

Formal syntax

[ pack | next ] || [ definite-first | ordered ]

Examples

Using the next keyword

<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> 

#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); 

Specifications

See also