CSS Grid Examples: Creating Responsive Layouts
CSS Grid is a powerful layout system for creating complex web designs with ease. Here are some practical examples to help you master its usage:
🌐 Basic Grid Structure
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
🧱 Grid with Custom Areas
.grid-container {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
This example demonstrates how to define specific regions like header
, nav
, and footer
.
📱 Responsive Grid
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
Use auto-fit
and minmax()
for flexible, responsive layouts.
For more advanced techniques, visit our CSS Grid Advanced Guide.
Explore interactive examples: CSS Grid Playground