What does grid-row: 1 do?

Question

I don't understand how grid-row: 1 works from the MDN page - it doesn't describe single-value syntax. What does giving it a value of 1 do? (Same goes for grid-column: 1.)

Answer 1

grid-row is shorthand for grid-row-start and grid-row-end.

One can pass in both values like 1/3. First value is the start line and the secondvalue is the end line, in a grid-based design.

In case second value is omitted, then the element will take 1 box.

This is, starting at first line and ending at third line. Which means 1 / 3.

Imagine the box divided in horizontal lines, and it will look something like this if the first box has the style grid-row : 1 / 3

This is, starting at first line and spanning 1 box. Which means 1:

Imagine the box divided in horizontal lines, and it will look something like this if the first box has the style grid-row : 1

Read this