CSS Grid Advanced Layout
CSS Masonry Layout
/* CSS native masonry (Chrome flags / Firefox) */
.masonry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 16px;
}
/* Fallback: multi-column */
.masonry-fallback {
column-count: 3;
column-gap: 16px;
}
.masonry-fallback > * {
break-inside: avoid;
margin-bottom: 16px;
}
/* JS-free approximation using auto-rows */
.pseudo-masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 10px; /* small unit */
gap: 16px;
}
/* Each item spans calculated rows via JS or
fixed spans: */
.item--tall { grid-row: span 30; }
.item--medium { grid-row: span 20; }
.item--short { grid-row: span 10; }
Grid Template Areas
/* Named area layout */
.page-layout {
display: grid;
grid-template-columns: 240px 1fr 300px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
min-height: 100vh;
gap: 0;
}
.site-header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content{ grid-area: main; }
.right-aside { grid-area: aside; }
.site-footer { grid-area: footer; }
/* Responsive: collapse sidebar on mobile */
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"aside"
"footer";
}
.sidebar { display: none; }
}
Subgrid
/* Cards that align internal elements across columns */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* inherits parent rows */
/* Now each card's header/body/footer aligns across columns */
}
.card__header { /* row 1 โ aligned across all cards */ }
.card__body { /* row 2 โ auto expanding */ }
.card__footer { /* row 3 โ pinned to bottom */ }
Grid Property Quick Reference
| Property | Description | Example |
|---|---|---|
| grid-template-columns | Define column tracks | repeat(3, 1fr), 200px auto 1fr |
| grid-template-rows | Define row tracks | auto 1fr auto |
| grid-auto-columns | Implicit column size | minmax(100px, auto) |
| grid-column | Item column placement | 1 / 3, span 2 |
| grid-row | Item row placement | 2 / 4, span 3 |
| place-items | Align + justify items | center, start end |
| gap | Grid gaps | 16px, 12px 24px |
| auto-fill vs auto-fit | Fill creates empty columns; fit collapses them | repeat(auto-fit, minmax(200px, 1fr)) |