🎯 CSS grid-column-start Property

grid-column-start is a CSS Grid property that specifies the column line where a grid item should begin. It gives you precise control over the horizontal placement of elements inside a grid layout.

By defining a starting column, you can position grid items exactly where you want them, creating more flexible and organized layouts.

The browser automatically determines the starting column according to the grid's placement rules.

.item {
    grid-column-start: auto;
}
                

You can specify a column line number to control exactly where the element begins.

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

In this example, the grid item starts from the second column line.

The span keyword allows an element to extend across multiple columns.

.item {
    grid-column-start: span 2;
}
                

This tells the browser that the element should span across two columns.

Resets the property to its default value.

.item {
    grid-column-start: initial;
}
                

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

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

Here, the grid item starts from the third column line within a four-column grid layout.