CSS Grid Introduction

CSS Grid is a two-dimensional layout system for arranging items in rows and columns. It's powerful for complex layouts like page templates, dashboards, and card grids. Grid gives precise control over both horizontal and vertical alignment.

Grid Basics

CSS

/* Enable grid */
.container {
  display: grid;
  /* Children become grid items */
}

/* Define columns */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  /* 3 columns: 200px, flexible, 200px */
}

/* Define rows */
.grid {
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  /* Header, content, footer */
}

/* Gap between items */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Grid Units and Functions

Unit/Function	Purpose	Example
fr	Fractional unit	grid-template-columns: 1fr 2fr
repeat()	Repeat pattern	repeat(3, 1fr)
minmax()	Min/max sizing	minmax(200px, 1fr)
auto-fit	Auto columns	repeat(auto-fit, minmax(200px, 1fr))

CSS

/* Fr unit - proportional */
.grid {
  grid-template-columns: 1fr 2fr 1fr;
  /* 1:2:1 ratio columns */
}

/* Repeat function */
.grid {
  grid-template-columns: repeat(3, 1fr);
  /* 3 equal columns */
}

/* Minmax for responsive */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Min 200px, grows to 1fr */
}

/* Named template */
.grid {
  grid-template-columns: [sidebar] 250px [main] 1fr [right] 150px;
  /* Named grid lines */
}

Common Grid Layouts

CSS

/* Page layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 60px;
  gap: 20px;
  height: 100vh;
}

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

/* Dashboard */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  grid-auto-rows: minmax(200px, auto);
}

Note

Grid is 2D layout (rows and columns). Use fr for flexible sizing, repeat() for patterns, gap for spacing. Perfect for complex layouts.

Template areas: [grid-template-areas](/css/grid-template-areas).