6. CSS Grid Mastery

Level: IntermediateDuration: 30m

Introduction to CSS Grid

CSS Grid is a two-dimensional layout system that allows precise control over rows and columns. Unlike Flexbox, which primarily handles one axis at a time, Grid can manage both axes simultaneously, making it ideal for complex layouts.

css

/* Grid container example */
div.container {
  display: grid; /* or inline-grid */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

`display: grid` turns the container into a grid.
`grid-template-columns` defines columns, `grid-template-rows` defines rows.
`gap` adds spacing between grid items.

Grid Template Areas

Grid areas allow naming regions of the grid to make layouts easier to manage.

css

div.container {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

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

Grid Item Positioning

Grid items can also be positioned using line numbers or span values.

css

/* Line-based placement */
.item1 {
  grid-column: 1 / 3; /* start at line 1, end before line 3 */
  grid-row: 1 / 2;
}
.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3; /* spans two rows */
}
.item3 {
  grid-column: 1 / -1; /* span all columns */
}

`grid-column` and `grid-row` define start and end lines.
Negative numbers count from the end of the grid.
`grid-area` can combine row and column placement or use named areas.

Grid Alignment & Gaps

CSS Grid allows fine control of alignment along both axes, similar to Flexbox but applied to both individual items and the whole grid.

css

/* Alignment examples */
div.container {
  justify-items: center; /* aligns items horizontally within their cell */
  align-items: center;   /* aligns items vertically within their cell */
  place-items: start end; /* shorthand: align-items justify-items */
  justify-content: space-around; /* aligns entire grid horizontally */
  align-content: stretch;         /* aligns entire grid vertically */
  gap: 15px;
}

Mini Project Step

Create a dashboard layout using CSS Grid. Include a header, sidebar, main content area, and footer. Use `grid-template-areas` for named layout regions, span multiple columns or rows for the sidebar, and adjust alignment using `justify-items` and `align-items`. Add consistent gaps between sections.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid Dashboard</title>
<style>
  body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
  .container {
    display: grid;
    grid-template-areas:
      'header header header'
      'sidebar main main'
      'footer footer footer';
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: 80px 1fr 50px;
    gap: 10px;
    height: 100vh;
  }
  .header { grid-area: header; background: #3498db; color: white; display: flex; align-items: center; justify-content: center; }
  .sidebar { grid-area: sidebar; background: #2ecc71; color: white; display: flex; align-items: center; justify-content: center; }
  .main { grid-area: main; background: #ecf0f1; display: flex; align-items: center; justify-content: center; }
  .footer { grid-area: footer; background: #e74c3c; color: white; display: flex; align-items: center; justify-content: center; }
</style>
</head>
<body>
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>
</body>
</html>

MDN CSS Grid Guide

Page

Introduction to CSS Grid

Grid Template Areas

Grid Item Positioning

Grid Alignment & Gaps

Mini Project Step