CSS grid-row-start Property

Subject: css

CSS grid-row-start Property

The grid-row-start property in CSS Grid is used to define the starting row line of a grid item. It helps control where the item is placed vertically inside the grid layout. Often used with grid-row-end, this property provides exact placement flexibility.

Why Use grid-row-start?

  • Precisely position elements on the vertical axis
  • Control layout structure without extra wrappers
  • Create advanced designs like dashboards, calendars, or news grids
  • Reorder visual elements independently of HTML structure

Syntax

🚀 Try it in Compiler

Values:

  • <line number>: A positive integer that refers to a row line (starts at 1)
  • auto: Default; lets the browser automatically place the item

Example: Using grid-row-start

🚀 Try it in Compiler

Explanation

  • .item1 starts at row line 2
  • .item2 starts at row line 4
  • Remaining items auto-fill the grid in the next available spots

Best Practices

  • Use for fine-tuned vertical placement within a grid
  • Combine with grid-row-end to define span
  • Ensure clear grid structure when manually positioning
  • Avoid confusing visual overlap in complex layouts

Common Use Cases

  • Custom row placement in dashboards
  • Overlapping or offset content blocks
  • Modular card layouts
  • Calendars, pricing tables, or structured forms

Key Takeaways

  • grid-row-start sets the vertical start line of a grid item
  • Use with line numbers or auto
  • Combine with grid-row-end for row span
  • Works only within display: grid containers
  • Helps build flexible, non-linear layouts
Next: CSS Grid Row End Property