🎯 CSS grid-column Property

The grid-column property is a CSS Grid shorthand property used to define the starting and ending column positions of a grid item. It allows developers to place elements precisely within a grid layout while keeping the code clean and easy to read.

Instead of writing both grid-column-start and grid-column-end separately, you can combine them into a single declaration using grid-column.

The general syntax of the property is shown below:

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

Here, start-line specifies where the item begins, while end-line determines where the item ends.

.item {
    grid-column: 2 / 4;
}
                

In this example, the grid item starts at column line 2 and ends at column line 4, spanning across two columns.

The browser automatically determines the position of the grid item based on the layout rules of the grid container.

.item {
    grid-column: auto;
}
                

You can specify exact starting and ending column lines to control the item's placement precisely.

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

This places the item from column line 1 to column line 3.

The span keyword defines how many columns a grid item should occupy.

.item {
    grid-column: span 2;
}
                

This tells the grid item to span across two columns from its current position.

Resets the property back to its default value.

.item {
    grid-column: initial;
}
                

The following example demonstrates how to position a grid item between specific column lines inside a four-column grid layout.

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

.item {
    grid-column: 2 / 4;
}
                

The item begins at column line 2 and ends at column line 4, occupying two columns within the grid.

The grid-column property is essential when building modern CSS Grid layouts. It gives developers full control over horizontal placement and helps create flexible, responsive, and organized designs.

• Control the horizontal position of grid items
• Create custom-width grid elements
• Build responsive page layouts
• Write cleaner and more maintainable CSS code
• Improve overall layout flexibility