CSS Grid Layouts - CSS Essentials

← Previous: Flexbox Mastery Next: Animations & Transitions →

CSS Grid is perfect for creating complex, 2-dimensional layouts. Use grid-template-columns, grid-template-rows, and item placement to build responsive designs.

Basic Grid Grid Columns Gaps Placement Template Areas

Basic Grid Setup

Create a grid container with display: grid and define columns with grid-template-columns.

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

.item {
  background: var(--primary);
  padding: 2rem;
}

Try it - 3 column grid

grid-template-columns

Use 1fr for equal fractions, pixel values for fixed sizes, or auto for content-based sizing.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  /* or: repeat(3, 1fr) */
  /* or: minmax(200px, 1fr) */
  gap: 1rem;
}

Try it - Toggle column layouts

Item

Grid Gaps

Use gap to create consistent spacing between rows and columns.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem; /* same for rows and columns */
  /* or: gap: 1rem 2rem; (row gap, column gap) */
}

Try it - 2rem gap

Grid Item Placement

Use grid-column and grid-row to position items. Span across multiple rows/columns.

.item-span {
  grid-column: 1 / 3; /* span from line 1 to 3 (2 columns) */
  grid-row: 1 / 3;    /* span from line 1 to 3 (2 rows) */
}

/* shorthand */
.item-span {
  grid-column: span 2; /* span 2 columns */
  grid-row: span 2;    /* span 2 rows */
}

Try it - Spanning items

grid-template-areas

Define a visual grid layout using named areas. Perfect for creating responsive page layouts.

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

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

Try it - Layout preview

Header

Main

CSS Grid Properties Quick Reference

Property	Example	Purpose
`display`	`grid`	Enable grid on container
`grid-template-columns`	`repeat(3, 1fr)`	Define columns
`grid-template-rows`	`auto 1fr auto`	Define rows
`gap`	`1rem 2rem`	Space between items
`grid-column`	`1 / 3` or `span 2`	Position/span columns
`grid-area`	`header`	Named area placement

Summary

display: grid enables a 2D grid layout system.
grid-template-columns defines the column structure.
1fr represents one fraction of available space.
repeat() creates multiple identical tracks efficiently.
gap creates consistent spacing without margin hacks.
grid-column / grid-row position and span items.
grid-template-areas provides visual, readable layout definitions.

← Previous: Flexbox Mastery Next: Animations & Transitions →