CSS grid-column-end Property

Subject: css

CSS grid-column-end Property

The grid-column-end property in CSS Grid is used to define the ending vertical grid line for a grid item. It determines how far horizontally the item should extend within the grid container.

Why Use grid-column-end?

  • Span elements across multiple columns
  • Create dynamic layouts like banners, cards, or featured sections
  • Control grid item width using either span or line number
  • Enable clean, responsive designs without complex markup

Syntax

🚀 Try it in Compiler

Common Values:

  • Line number: Ends the item at a specific column line (e.g., 5)
  • span X: Tells the item to span across X columns from its start point

Example: Spanning Columns with grid-column-end

🚀 Try it in Compiler

Explanation

  • .item1 starts at column line 1 and spans across 2 columns
  • .item2 starts at line 3 and ends at line 5
  • Other items are placed automatically into available slots

Best Practices

  • Use span X for responsive and relative layouts
  • Use fixed line numbers when designing structured layouts
  • Combine with grid-column-start for full placement control
  • Define column lines using grid-template-columns for better clarity

Common Use Cases

  • Hero banners spanning across the grid
  • Dashboard panels of varying widths
  • Card-based layouts with custom placement
  • Complex form layouts with labeled columns

Key Takeaways

  • grid-column-end defines where a grid item ends horizontally
  • Accepts a specific line number or span keyword
  • Must be used inside a container with display: grid
  • Combine with grid-column-start for precise control
  • Useful for building modern, responsive, and flexible layouts
Next: Responsive Web Design Introduction