🎯 CSS grid-column-end Property

grid-column-end is a CSS Grid property that specifies where a grid item should end horizontally within a grid layout. It allows you to control the ending column line of an element, making it easier to create precise and responsive grid designs.

By combining grid-column-start and grid-column-end, you can define exactly how many columns an item should occupy.

The browser automatically determines the ending column based on the grid's placement rules.

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

You can specify a column line number to determine exactly where the grid item should end.

.item {
    grid-column-end: 4;
}
                

In this example, the element ends at the fourth column line.

The span keyword allows an element to stretch across a specified number of columns.

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

This means the element will span across two columns from its starting position.

Resets the property to its default value.

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

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

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

In this example, the grid item starts at column line 2 and ends at column line 4, occupying two columns of space.

The grid-column-end property is useful when building advanced CSS Grid layouts. It gives you complete control over how wide an element should be and where it should finish within the grid structure.

• Create custom grid item widths
• Control element positioning precisely
• Build responsive layouts more easily
• Combine with grid-column-start for full placement control