CODEWITHSUNDEEP
csscss-grid
nCardot
nCardot

Reputation: 6585

What does grid-row: 1 do?

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.)

Upvotes: 1

Views: 573

Answers (2)

Tushar Shahi
Tushar Shahi

Reputation: 20486

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 enter image description here

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 enter image description here

Read this

Upvotes: 1

Erfan
Erfan

Reputation: 1802

So according to MDN its a shorthand for grid-row-start and grid-row-end

by "line" i mean the horizontal lines:

grid-row: 1; start on 1st grid line, height is one row

grid-row: 1 / 3; start 1st grid line, ends on 3rd grid line

grid-row: 2 / -1; start 2nd grid line, ends on "-1" grid line(last grid line)

grid-row: 1 / span 2;; start 1st grid line, height is two rows

grid-column does the similar, with the vertical lines being considered and calculated.

Upvotes: 2

Related Questions