CSS grid-column-end Property

What You’ll Learn

The grid-column-end property sets where a grid item stops on the column axis, controlling how many columns it spans.

Introduction

The grid-column-end property in CSS is used in grid layouts to determine where a grid item ends on the column axis. It specifies the line where the item should stop, allowing for flexible and complex grid designs.

This property is crucial for placing and spanning elements across multiple columns in a grid container.

Definition and Usage

Apply grid-column-end on a child of a grid container. Use it alone with span n to stretch an item across multiple columns from its auto-placed start. Pair it with grid-column-start when you need both the starting and ending column lines defined separately.

📝 Syntax

The syntax for the grid-column-end property is straightforward. It can be applied to any grid item within a grid container:

element {
  grid-column-end: value;
}

Basic Example

.item2 {
  grid-column-end: span 3;
}

With grid-column-start

.featured {
  grid-column-start: 2;
  grid-column-end: 5;
}

Default Value

The default value of the grid-column-end property is auto, which means the grid item will span only one column and end at the next column line.

Syntax Rules

• Applies to grid items (children of a grid container), not the container itself.
• Accepts line numbers, span n, named lines, and auto.
• Works with grid-column-start; together they form the grid-column shorthand.
• The property is not inherited.
• Negative line numbers count from the end of the grid.

💎 Property Values

Examples Gallery

Span columns with span, set an exact ending line, and combine start and end for precise placement.

.item2 {
  grid-column-end: span 3;
}

.wide {
  grid-column-start: 1;
  grid-column-end: 4;
}

.featured {
  grid-column-start: 2;
  grid-column-end: 5;
}

.stretch {
  grid-column-start: 2;
  grid-column-end: -1;
}

♿ Accessibility

• Keep DOM order meaningful when spanning changes visual reading flow.
• Do not rely on column span alone to convey relationships; use headings and labels.
• Test keyboard tab order when wide items reorder the visual layout.
• Use semantic elements such as <main> alongside grid placement.
• Verify content remains readable when items span many columns on small screens.

💡 Best Practices