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 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.