YOUR CSS WORKBENCH

The CSS Grid playground.

Think in tracks. Adjust columns, experiment with spans, and see how each piece fits.

Container
Selected item: Item 1
640 × 320px · 6 itemsClick an item to edit it
css · generated from this layout
* { box-sizing: border-box; }
body { margin: 24px; font-family: Arial, sans-serif; background: #f8fafc; }
.container {
  box-sizing: border-box;
  width: 640px;
  height: 320px;
  padding: 16px;
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #3730a3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(80px, 1fr));
  grid-auto-rows: minmax(80px, auto);
  grid-auto-flow: row;
  row-gap: 16px;
  column-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
}
.item {
  border: 1px solid #818cf8;
  border-radius: 6px;
  background: #e0e7ff;
  padding: 16px;
  min-height: 56px;
  min-width: 0;
  overflow-wrap: anywhere;
  font: 600 14px Arial, sans-serif;
}
.item-1 {
  grid-column: span 1;
  grid-row: span 1;
}
.item-2 {
  grid-column: span 1;
  grid-row: span 1;
}
.item-3 {
  grid-column: span 1;
  grid-row: span 1;
}
.item-4 {
  grid-column: span 1;
  grid-row: span 1;
}
.item-5 {
  grid-column: span 1;
  grid-row: span 1;
}
.item-6 {
  grid-column: span 1;
  grid-row: span 1;
}

Custom edits reset on refresh. Lesson and challenge progress is saved separately. The preview keeps its chosen width; scroll to explore larger layouts.

Spans and extra items can create implicit rows beyond the explicit template. These use minmax(80px, auto) and may extend below the chosen container height.

A property reference

Tracks and gaps

Columns and explicit rows define the initial grid. Equal mode uses minmax(0, 1fr). Sidebar modes use a fixed track and one flexible track. Row and column gaps are separate.

Rows and placement

Flexible rows have an 80px minimum and share available height. Fixed rows keep their chosen pixel size. Auto-placement proceeds by row without dense packing. Extra items create implicit rows.

Spans and alignment

Spans count tracks. Column spans are constrained to the column count. Row spans may extend into implicit rows. justify-items and align-items position items within their grid areas.

Two experiments to try

01 / Sidebar and content

Choose Sidebar and content. At 640px with 32px total padding and a 16px gap, the 180px sidebar leaves 412px for main content. Move the sidebar right to reverse track order.

02 / Header and body

Choose Header and body. The first item spans two columns; automatic placement puts the next two underneath. Change its span to one, then explore a row span that creates extra tracks.

Watch out for…

Confusing line numbers with spans, assuming explicit rows cap the layout, or treating fr as a percentage of full width. The separate responsive lesson covers auto-fit; these controls use explicit tracks.

Keep a useful result

Copy the active HTML or CSS view, or download a self-contained HTML example. Exports include typography, colors, padding, dimensions, and item sizing. Selection outlines and axis guides are presentation only.

Learn the why