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 start on row 2 and end on row 4, though the 4th row is not actually included, only rows 2 and 3! The item will then start on column 3 and instead of setting a number for which column to end on, we want this item to span 5 columns — this means the item will include columns 3, 4, 5, 6, and 7.
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.