Grid by Example

Everything you need to learn CSS Grid Layout

Line-based placement shorthand - grid-row and grid-column

We can achieve the same result as in example 2 using a shorthand syntax declaring the start and end values at once. Values are separated with a / and again it would be valid to omit the / and the end value as we are spanning only one track.

Read the specification | View example as full page

See the Pen Grid by Example 3: Line-based placement shorthand by rachelandrew (@rachelandrew) on CodePen.