Build automatically responsive card grids without writing media queries using auto-fit and minmax().
1. The Holy Grail Responsive Grid
⊞Code Example
/* Automatically adds/removes columns based on screen width! */
.responsive-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
2. Named Grid Template Areas
⊞Code Example
.dashboard-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr 40px;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }