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.
grid-area takes four values separated by slashes. The order is important! This is how grid-area will interpret those values.
grid-row-startgrid-column-startgrid-row-endgrid-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.