masonry-auto-flow
=================

Limited availability
--------------------

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

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **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
------


```css
/\* 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: revert-layer;
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
-----------------

|  |  |
| --- | --- |
| Initial value | `pack` |
| Applies to | Grid containers with masonry layout |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

masonry-auto-flow =   
  [ pack | next ]               ||  
  [ definite-first | ordered ]    
  
```

Examples
--------

### Using the next keyword

#### HTML


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


```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;
}
```



```js
const selectElem = document.querySelector("select");

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

  grid.style.masonryAutoFlow = masonryAutoFlow;
}

selectElem.addEventListener("change", changeMasonryFlow);
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # masonry-auto-flow |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `align-tracks`, `justify-tracks`