CSS Grid layout: Using line-based placement, simple example

Using line-based placement, simple example

Grid lines are horizontal and vertical lines that separate rows and columns. They also have numeric indexes. We can use those grids to indicate where a grid item should be placed.

This example uses grid-column-start and grid-column-end. We can also use the span keyword.

Use Firefox' Developer Tools in order to view this demo. Its grid inspection tools are currently the state of the art.

Related specification: CSS Grid Layout Module Level 1.

Grid item A

Grid item B

Grid item C