en/tutorials/web-development/css-grid-examples

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