CSS grid-row-end Property

Subject: css

CSS grid-row-end Property

The grid-row-end property in CSS Grid specifies the end line of a grid item on the vertical (row) axis. It determines where a grid item stops and can be used to span multiple rows or stop at a specific line.

Why Use grid-row-end?

  • Control how many rows an item should occupy
  • Build complex or staggered layouts
  • Enable flexible designs like masonry-style grids
  • Avoid nested structures by using grid features

Syntax

🚀 Try it in Compiler

Values

  • line number: Ends the item at a specific grid line (e.g., grid-row-end: 4)
  • span <number>: Makes the item span across that many rows (e.g., grid-row-end: span 2)

Example: Spanning Rows with grid-row-end

🚀 Try it in Compiler

Explanation

  • .item1 starts at row 1 and spans 2 rows using grid-row-end: span 2
  • .item2 starts at row 2 and ends exactly at row line 4 (spans rows 2 and 3)
  • Other items are placed automatically by the grid

Best Practices

  • Use span for content that should span a set number of rows
  • Use specific line numbers for structured layouts
  • Always combine with grid-row-start for full control
  • Keep track of row line positions in fixed templates

Common Use Cases

  • Magazine or blog-style cards
  • Featured content sections with taller elements
  • Product listings with flexible row spans
  • Pinterest-style layout designs

Key Takeaways

  • grid-row-end defines where a grid item ends vertically
  • Use span for dynamic row height
  • Use a line number for exact row placement
  • Combine with grid-row-start for vertical grid control
  • Requires display: grid on the parent container
Next: CSS Grid Column Start Property