To create the most common masonry layout, your columns will be the grid axis and the rows the masonry axis, defined with grid-template-columns
and grid-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 class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
// prettier-ignore
const 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-ignore
const 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 the span
keyword. Items may also be positioned using line-based positioning.
In this example two of the items span two tracks, and the masonry items work around them.
<div class="grid">
<div class="item"></div>
<div class="item span-2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item span-2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></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 class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item positioned">positioned.</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></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 browsers that do not support masonry, regular grid auto-placement will be used instead.
Specifications Browser compatibility css.properties.grid-template-columns.masonryLoadingâ¦
css.properties.grid-template-rows.masonryLoadingâ¦
See alsogrid-auto-flow
for controlling grid auto-placementRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.5