Masonry layout
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Level 3 of theCSS grid layout specification includes amasonry value forgrid-template-columns andgrid-template-rows. This guide details what masonry layout is and how to use it.
Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.
Creating a masonry layout
To create the most common masonry layout, your columns will be the grid axis and the rows the masonry axis, defined withgrid-template-columns andgrid-template-rows.The child elements of this container will now lay out item by item along the rows, as they would with regular grid layout automatic placement.
As the items move onto new rows, they will display according to the masonry algorithm. Items will load into the column with the most room, causing a tightly packed layout without strict row tracks.
* { box-sizing: border-box;}body { font: 1.2em sans-serif;}.grid { padding: 10px; border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6;}.item { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; color: #d9480f;}.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry;}<div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>// prettier-ignoreconst itemSizes = [ "2em", "3em", "1.6em", "4em", "3.2em", "3em", "4.5em", "1em", "3.5em", "2.8em",];const items = document.querySelectorAll(".item");for (let i = 0; i < items.length; i++) { items[i].style.blockSize = itemSizes[i];}It is also possible to create a masonry layout with items loading into rows.
// prettier-ignoreconst itemSizes = [ "2em", "3em", "1.6em", "4em", "2.2em", "3em", "4.5em", "1em", "3.5em", "2.8em",];const items = document.querySelectorAll(".item");for (let i = 0; i < items.length; i++) { items[i].style.inlineSize = itemSizes[i];}.grid { display: grid; gap: 10px; grid-template-columns: masonry; grid-template-rows: repeat(3, 100px);}Controlling the grid axis
On the grid axis, things will work just as you expect them to in grid layout. You can cause items to span multiple tracks while remaining in auto-placement, using thespan keyword. Items may also be positioned using line-based positioning.
Masonry layout with spanning items
In this example two of the items span two tracks, and the masonry items work around them.
<div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry;}.span-2 { grid-column-end: span 2;}This example includes an item which has positioning for columns. Items with definite placement are placed before the masonry layout happens.
<div> <div></div> <div></div> <div></div> <div></div> <div>positioned.</div> <div></div> <div></div> <div></div> <div></div> <div></div></div>.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry;}.positioned { padding: 1em; grid-column: 2 / 4;}Fallbacks for masonry layout
In browsersthat do not support masonry, regular grid auto-placement will be used instead.
Specifications
| Specification |
|---|
| CSS Grid Layout Module Level 3 # masonry-layout |
Browser compatibility
css.properties.grid-template-columns.masonry
css.properties.grid-template-rows.masonry
See also
grid-auto-flowfor controlling grid auto-placement- Native CSS masonry layout in CSS grid via Smashing Magazine (2020)