HTML Structure permalink
Let's start by making a grid template that is five by five.
<!-- Row 1 -->
<!-- Row 2 -->
CSS Item permalink
In our first introduction, we saw how to span an item over multiple blocks; let's dive deeper into that.
CSS Grid-column property permalink
The property has multiple ways of describing the width of an item.
grid-column: 1 / 5;: Starts on column one end before column five
grid-column: 1 / span 3;Start on column one and span three columns
grid-column: 2 / span 3;Start on column two and span three columns
grid-column: span 3;Span three from wherever it starts
Have a look at this Codepen:
CSS Grid-row property permalink
As like the grid-column, we can also use the grid-row to stack over rows.
grid-row: 1 / 4;Start on row one and end on row four
grid-row: 1 / span 2;Start on one and span two rows
grid-row: span 2;Span two from anywhere
CSS Grid-area permalink
We can also make a grid-area to span both columns and rows.
grid-area: 1 / 2 / 5 / 6; Meaning: Start on Row 1, Column 2 and end at Row 5 Column 6
That will result in the following Codepen:
CSS Grid Naming Areas permalink
Another cool feature, is we can name areas!
grid-template-areas: 'Custom Custom . . .' 'Custom Custom . . .';
This will make two rows, with the names
Custom columns and three unnamed columns.
And then on our item:
This will result in the following:
Browser Support permalink
CSS Grid has support from all major browsers, we have some issues in IE, but they can be Polyfilled.