CSS Grid Layout is a powerful two-dimensional layout system that revolutionized how we create web layouts. Unlike Flexbox, which is primarily one-dimensional, Grid allows you to work with both rows and columns simultaneously.

Basic Grid Container

To create a grid container, simply apply display: grid to an element:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

This creates a grid with 3 equal columns and 2 rows with specific heights.

Grid Template Areas

One of the most intuitive features of CSS Grid is template areas:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 60px;
  gap: 10px;
}

.header {
  grid-area: header;
  background: #3498db;
}

.sidebar {
  grid-area: sidebar;
  background: #e74c3c;
}

.main {
  grid-area: main;
  background: #2ecc71;
}

.footer {
  grid-area: footer;
  background: #34495e;
}

Interactive Grid Layout Example

Try this interactive grid layout with template areas:

Responsive Grid with auto-fit and minmax

Create responsive grids without media queries:

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

This creates a responsive gallery where items automatically wrap to new rows as needed.

Advanced Grid Placement

Control item placement with precision:

.item {
  grid-column: 1 / 3; /* Spans from column 1 to 3 */
  grid-row: 2 / 4;    /* Spans from row 2 to 4 */
}

/* Using span keyword */
.wide-item {
  grid-column: span 2;
  grid-row: span 3;
}

/* Negative line numbers */
.full-width {
  grid-column: 1 / -1; /* Spans entire width */
}

Implicit vs Explicit Grid

CSS Grid automatically creates tracks when needed:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense; /* Fills gaps automatically */
}

Practical Example: Dashboard Layout

Here's a complete dashboard layout using CSS Grid:

<div class="dashboard">
  <header class="dashboard-header">Header</header>
  <nav class="dashboard-nav">Navigation</nav>
  <main class="dashboard-main">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card wide">Wide Card</div>
    <div class="card">Card 3</div>
  </main>
  <aside class="dashboard-sidebar">Sidebar</aside>
</div>

.dashboard {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar";
  grid-template-columns: 200px 1fr 250px;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
  gap: 1rem;
  padding: 1rem;
}

.dashboard-header {
  grid-area: header;
  background: #2c3e50;
  color: white;
  padding: 1rem;
}

.dashboard-nav {
  grid-area: nav;
  background: #34495e;
  color: white;
  padding: 1rem;
}

.dashboard-main {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  grid-auto-rows: minmax(150px, auto);
}

.dashboard-sidebar {
  grid-area: sidebar;
  background: #ecf0f1;
  padding: 1rem;
}

.card {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card.wide {
  grid-column: span 2;
}

/* Responsive */
@media (max-width: 768px) {
  .dashboard {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
  }
  
  .card.wide {
    grid-column: span 1;
  }
}

Grid Alignment

Control alignment of the entire grid and individual items:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  
  /* Grid alignment */
  justify-content: center; /* Horizontal alignment */
  align-content: center;   /* Vertical alignment */
  
  /* Item alignment */
  justify-items: center;   /* All items horizontally */
  align-items: center;     /* All items vertically */
}

/* Individual item alignment */
.special-item {
  justify-self: start;
  align-self: end;
}

Subgrid (Modern Browsers)

Subgrid allows nested grids to align with parent grid tracks:

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

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

Best Practices

1. Use Grid for 2D layouts: When you need to control both rows and columns
2. Combine with Flexbox: Use Grid for overall layout, Flexbox for component internals
3. Mobile-first approach: Start with simple layouts and enhance for larger screens
4. Semantic HTML: Use proper HTML elements regardless of grid placement
5. Fallbacks: Provide fallbacks for older browsers when necessary

CSS Grid has transformed web layout possibilities, making complex designs achievable with clean, maintainable code. Master it, and you'll have a powerful tool in your web development arsenal.