Mastering CSS Grid Layout

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

What is CSS Grid?

CSS Grid is a two-dimensional layout system that allows you to create complex layouts with rows and columns. Unlike Flexbox, which is primarily one-dimensional, Grid excels at creating layouts in both dimensions simultaneously.

Basic Grid Setup

Here’s a simple grid container:


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

This creates a three-column grid with equal-width columns and 20px gaps between items.

Creating a Responsive Layout


.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

This creates a responsive grid that automatically adjusts the number of columns based on available space.

Grid Template Areas

One of Grid’s most powerful features is template areas:


.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  gap: 10px;
}
 
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Practical Example

Here’s a complete card grid layout:


<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>


.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}
 
.card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}