grid-row / grid-column

Avatar of Dennis Gaebel
Dennis Gaebel on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
575211*1610.1

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312210.3

More information