grid-row / grid-column

The grid-row and grid-column properties define which row or column an element will be displayed on.

.element {
  grid-row: 1 / 2;
  grid-column: 3 / -1;
}

Here’s an explicit 3 × 3 grid where these properties are used to place grid items onto it in specific places:

Browser support

More information

• The Complete Guide to Grid
• grid-template-columns / grid-template-rows

Related

Almanac on Jan 13, 2022

gap

.element { gap: 20px 30px; }

Mojtaba Seyedi

Almanac on Aug 30, 2021

column-gap

.example { column-gap: 25px; }

Geoff Graham

Almanac on Apr 26, 2022

grid-template-columns / grid-template-rows

.grid { grid-template-columns: auto 100px 1fr 2fr; }

grid grid-template-columns grid-template-rows

Dennis Gaebel

Almanac on Aug 30, 2021

row-gap

.element { row-gap: 2rem; }

Geoff Graham