The grid layout: the grid-column and grid-column properties are using line numbers

DanielNovember 18, 2021November 16, 2021

When placing elements in a CSS grid it's very important to remember that the grid is using the lines number to place the elements.

Take for example the following layout.

For the columns, we have 4 lines. So, for the footer element when we are declaring grid-column: 1/4 we are saying that the element starts from line 1 and ends at line 4.

The same is true also when using grid-column We are not referring to cells, but to the actual line numbers.

This was for me one of the aha moments when using the learning the grid layout.

Below you have the full code for this layout.

See the Pen
CSS Line Numbers by JS Craft (@js-craft)
on CodePen.

And in the next post, we will see how we can even actually give names to both the columns and rows lines.