CSS Grid Mastery

CSS Grid is one of the most powerful layout systems in CSS. Let’s explore how to use it effectively.

Basic Grid Setup

Create a simple grid container:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Grid Template Areas

Define named areas for intuitive layouts:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Responsive Grids

Auto-fit vs Auto-fill

/* Auto-fit: Columns stretch to fill space */
.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Auto-fill: Creates empty columns if space available */
.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

Grid Alignment

Container Alignment

.container {
  /* Align all items */
  justify-items: center;  /* Horizontal */
  align-items: center;    /* Vertical */
  
  /* Align grid tracks */
  justify-content: space-between;
  align-content: start;
}

Item Alignment

.item {
  justify-self: end;
  align-self: start;
}

Spanning Rows and Columns

.featured {
  grid-column: span 2;  /* Span 2 columns */
  grid-row: span 2;     /* Span 2 rows */
}

.full-width {
  grid-column: 1 / -1;  /* Span all columns */
}

Real-World Example: Card Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.card {
  display: grid;
  grid-template-rows: 200px auto 1fr auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-image { grid-row: 1; }
.card-title { padding: 1rem 1rem 0; }
.card-content { padding: 0 1rem; }
.card-footer { 
  padding: 1rem;
  align-self: end;
}

Browser Support

CSS Grid is supported in all modern browsers:

Tips and Best Practices

1. Start with mobile - Design your single-column layout first
2. Use fr units - They handle distribution automatically
3. Name your lines - Makes code more readable
4. Combine with Flexbox - Grid for layout, Flexbox for alignment
5. Use DevTools - Browser grid inspectors are invaluable

Conclusion

CSS Grid revolutionizes web layout. Master it, and you’ll build complex, responsive layouts with minimal code.