masonry-auto-flow
Quick Summary for masonry-auto-flow
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Check the Browser compatibility table carefully before using this in production.
Code Usage for masonry-auto-flow
/* 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;
More Details for masonry-auto-flow
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:
A single keyword: one ofpack
, 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
[ pack | next ] || [ definite-first | ordered ]
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);
ResultSpecifications
Specification |
---|
CSS Grid Layout Module Level 3 # masonry-auto-flow |
See also
Related CSS properties:align-tracks
, justify-tracks
Select your preferred language English (US)日本語 Change language
Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline