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 uncomment the C <div>
on line 10.
In style.css, inside the .c
ruleset, use grid-area
to make the element start at row six and column eight. Then have it take up three rows and one column. Use span
for both ending values.
Let’s refactor the code for the other two items in the grid. Start with item b
. Replace grid-row
and grid-column
with grid-area
. Make sure the item still takes up the same amount of space.
Lastly, refactor item a
. Replace grid-row
and grid-column
with grid-area
. Again, use span
to set the end of the rows and columns.