Grid & Flexbox v3

Chapter 4: Grid's span syntax

So far, we have used numbered lines to describe the starting and ending points of our grid cells. However, the span syntax is also an option. This is a relative-style syntax where we can indicate how many columns or rows a cell should span over, potentially without a specific starting point.

The repeat syntax is also introduced.

Fork the opening CodePen to your account:

Beginning CodePen

Ending CodePen

You Try It: Grid Span syntax

Revisit our Martian collage and change its syntax from numbered lines to the span syntax.

Beginning CodePen

Ending CodePen

Resources and references