CSS Grid is a 2-dimensional layout engine designed for handling both columns and rows simultaneously.
1. Modern Responsive Grid without Media Queries
By combining repeat(), auto-fit, and minmax(), you can build responsive card grids that automatically adjust to any screen size!
⊞Code Example
.card-grid {
display: grid;
/* Automatically create as many columns as will fit, min 280px wide each */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
2. Named Grid Areas Template
⊞Code Example
.app-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr 50px;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }