Master CSS Grid for modern layouts.
Build complex responsive layouts with ease.
Basic Grid
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
Named Areas
.container {
display: grid;
grid-template-areas:
“header header header”
“sidebar main aside”
“footer footer footer”;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
Auto-fit
.container {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
Conclusion
CSS Grid makes complex layouts simple!