May 9th, 2019
The second day of learning CSS grid.
I’m continuing my CSS Grid lessons, and today we start with grid-column. This is the first property in this course that targets grid items and not the grid container.
It’s important to understand that the grid contains hypothetical horizontal and vertical lines. They start with 1 at the top left corner of the grid and move right for columns and down for rows.
This is what a 3x3 grid looks like:
We use the grid-column property to control the number of columns an item will consume. We use grid-column in conjunction with the line numbers we want the item to start and stop at.
grid-column: 1 / 3;
This will make item one in the grid start at line one and span to the third line, consuming two columns.
Items can also consume multiple rows in the same way as columns. All we have to do is to define the starting line and ending line.
grid-row: 2 / 4;