New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →


Shorthand property for grid-column-start and grid-column-end.

default grid-column: auto auto;

The grid item's column start and end are automatically set.

grid-column: 1 / 3;

The grid item starts before the first column and ends just before the third one.

grid-column: span 3;

The grid item spans 3 columns.

grid-column: 1 / span 4;

The grid items starts before the first column and spans for 4 columns, creating a new one in the process.

grid-column: main;

You can use an area name to "copy" its column start and end positions.