CSS grid-column-start

The grid-column-start property specifies at which grid column to place an item. It defines the starting position of an item in terms of grid columns. It can be used to create complex layouts on a webpage using CSS Grid.

Below is an example of how the grid-column-start property works:

Result:
1
2
3

In the example above, we have a grid container with three items placed inside. Each item has a different grid-column-start value, which determines at which grid column the item will start. The first item starts at the first grid column, the second item starts at the second grid column, and the third item starts at the third grid column.

The CSS code for the example above is as follows:


.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

.item2 {
  grid-column-start: 2;
}

.item3 {
  grid-column-start: 3;
}

You can customize the layout by adjusting the grid-column-start values for each item to achieve the desired grid placement.