Drag across cells to place items on a real CSS Grid — no typed line numbers required to get started. Add tracks, mix fr/px/auto/minmax, and watch grid-template-areas build itself from what you drew.
Read the display & visibility lessonEach track is one column (or row) width. fr shares leftover space by ratio; px is a fixed size; auto fits content; minmax(150px, 1fr) never shrinks below its minimum.
Each track is one column (or row) width. fr shares leftover space by ratio; px is a fixed size; auto fits content; minmax(150px, 1fr) never shrinks below its minimum.
How each item is positioned inside its own cell along the row axis, when the item is narrower than the cell.
How each item is positioned inside its own cell along the column axis, when the item is shorter than the cell.
How the whole track grid is positioned inside the container when the tracks add up to less than the container width.
How the whole track grid is positioned inside the container when the tracks add up to less than the container height.
Click and drag across empty cells, then release to place an item there.
Placement (grid lines, 1-indexed)
grid-template-areas:
"header header header"
"main main aside";.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 16px;
}
.header {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.main {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
.aside {
grid-column: 3 / 4;
grid-row: 2 / 3;
}