What is the purpose of the grid-column and grid-row properties?

Q: What is the purpose of the grid-column and grid-row properties?

The `grid-column` and `grid-row` properties in CSS Grid define where an item is placed within the grid and how many tracks (columns or rows) it spans. They control an element’s start and end positions on the grid lines, allowing precise layout control. `grid-column` determines the horizontal position and width (number of columns) of a grid item. `grid-row` determines the vertical position and height (number of rows) of a grid item. Both properties use the syntax `start / end`, where you can specify line numbers or the `span` keyword. You can use shorthand properties like `grid-column: 1 / span 2;` to make an item start at line 1 and span across 2 columns. .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); gap: 10px; } .item { background-color: #2196f3; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; } .item1 { grid-column: 1 / span 2; } .item2 { grid-row: 1 / span 2; } Span 2 Columns Span 2 Rows Item 3 Item 4 Item 5

Difficulty: 5/10

grid placement, responsive design, layout utilities

Purpose of grid-column and grid-row in CSS Grid

The grid-column and grid-row properties in CSS Grid define where an item is placed within the grid and how many tracks (columns or rows) it spans. They control an element’s start and end positions on the grid lines, allowing precise layout control.

Key Points

1
grid-column determines the horizontal position and width (number of columns) of a grid item.
2
grid-row determines the vertical position and height (number of rows) of a grid item.
3
Both properties use the syntax start / end, where you can specify line numbers or the span keyword.
4

Example: Positioning and Spanning Items with grid-column and grid-row

Scenario Questions

0-2 years experience

2-5 years experience

1We have a product page where a promotional banner should stretch across the top three columns on desktop but collapse to a single column on mobile. Walk me through how you'd implement that using grid-column and grid-row, and what CSS you’d need to adjust for the breakpoint.

Follow-up Questions