grid-column Property in CSS Grid Layouts

grid-column is a shorthand for the grid-column-start and grid-column-end properties.

In other words, instead of writing:

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

You can alternatively use the grid-column property to shorten your code like this:

.grid-item1 {
  grid-column: 1 / 3;
}

grid-column syntax

grid-column: grid-column-start / grid-column-end;

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.