Grid Properties

Beyond columns and rows — place items in specific cells, use named areas for entire layouts, and align inside cells.

5 min read Level 3/5 #css#grid#layout

What you'll learn

Place items by line numbers
Lay out a page with `grid-template-areas`
Align inside grid cells

The deeper grid features unlock real layouts — full pages, dashboards, calendars.

Place Items By Line

Grid lines are numbered starting at 1. grid-column: 1 / 3 means “from line 1 to line 3” — covering two columns.

.hero {
  grid-column: 1 / -1;    /* span all columns */
  grid-row: 1 / 3;        /* span two rows */
}

Negative numbers count from the end. -1 is the last line.

Span Shorthand

.wide { grid-column: span 2; }   /* span 2 columns from current */

Named Areas — The Killer Feature

For full-page layouts, name regions:

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100dvh;
}

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

The grid-template-areas literally draws your layout in strings. Header spans both columns, sidebar takes the left, etc.

For a different layout on mobile:

@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Alignment Inside Cells

Same vocabulary as flex.

On the container (every cell):

.grid {
  justify-items: center;   /* horizontal alignment of items */
  align-items: center;     /* vertical alignment of items */
}

On a single item:

.special {
  justify-self: end;
  align-self: start;
}

Aligning the Grid Itself

When the grid doesn’t fill the container:

.grid {
  justify-content: center;   /* horizontal alignment of the grid */
  align-content: center;     /* vertical alignment of the grid */
}

Implicit Rows / Columns

If items spill past the explicit grid, the browser creates implicit tracks. Control their size:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;       /* every implicit row is 200px tall */
}

grid-auto-flow: dense packs items more tightly when they have different sizes — fills gaps left by larger items.

Up Next

The other layout tool — position.

Position →