Grid comes in three flavours: Two-column, Three-column and Masonry layout.
Two-column layout #
The two-column layout positions grid items side-by-side when space permits, so that items proportionately share the available space.
Use the layout by adding data-layout="50-50" to any element with the .grid class applied.
Item 1
Item 2
Item 3
Item 4
/* Two column when space permits */
.grid[data-layout='50-50'] {
--grid-placement: auto-fit;
--grid-min-item-size: clamp(16rem, 50vw, 26rem);
}
Three-column layout #
The three-column layout positions grid items in three columns when space permits, so that items proportionately share the available space.
Use the layout by adding data-layout="33x3" to any element with the .grid class applied.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
/* Three column when space permits */
.grid[data-layout='33x3'] {
--grid-placement: auto-fit;
--grid-min-item-size: clamp(16rem, 33vw, 18rem);
}
Masonry layout #
The masonry layout removes the extra gap often left between rows by grid items of varying size. Use the layout by applying data-rows="masonry" to any element with the .grid class applied.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
/* Masonry layout (will work one day in all browsers) */
.grid[data-rows='masonry'] {
grid-template-rows: masonry;
align-items: start;
}