We’ve already been able to use grid-row
and grid-column
as shorthand for properties like grid-row-start
and grid-row-end
. We can refactor even more using the property grid-area
. This property will set the starting and ending positions for both the rows and columns of an item.
.item { grid-area: 2 / 3 / 4 / span 5; }
grid-area
takes four values separated by slashes. The order is important! This is how grid-area
will interpret those values.
grid-row-start
grid-column-start
grid-row-end
grid-column-end
In the above example, the item will occupy rows two and three and columns three through eight.
Using grid-area
is an easy way to place items exactly where you want them in a grid.
Instructions
In index.html
add a third item to the grid. Make sure this item is of class box
and c
.
In style.css
, create a rule set for class c
. Use grid-area
to make this item take up the eighth column and rows six, seven and eight. Use span
for both ending values.
Let’s refactor our code for the other two items in the grid. Start with item a
. Replace grid-row
and grid-column
with grid-area
. Again, use span
to set the end of the rows and columns.
Do the same refactoring for item b
using grid-area
. Make sure the item still takes up the same amount of space.