At this point, we’ve covered a great deal of different ways to manipulate the grid and the items inside it to create interesting layouts.
grid-template-columnsdefines the number and sizes of the columns of the gridgrid-template-rowsdefines the number and sizes of the rows of the gridgrid-templateis a shorthand for defining bothgrid-template-columnsandgrid-template-rowsin one linerow-gapputs blank space between the rows of the gridcolumn-gapputs blank space between the columns of the gridgapis a shorthand for defining bothrow-gapandcolumn-gapin one linegrid-row-startandgrid-row-endmakes elements span certain rows of the gridgrid-column-startandgrid-column-endmakes elements span certain columns of the gridgrid-areais a shorthand forgrid-row-start,grid-column-start,grid-row-end, andgrid-column-end, all in one line
You have seen how to set up and fill in a grid and you now have one more CSS positioning technique to add to your toolkit! Let’s do some practice to solidify these skills.
Instructions
Let’s start by making this bunch of divs into a grid. In style.css, in the .grid ruleset, add a declaration that uses the display property along with the value necessary to make the element a CSS grid.
Structure the grid to have four columns — the first two each taking up 25% of the total width, the third column taking up two-thirds of the remaining space, and the last column taking up the last third of the remaining space.
Give the grid two rows, both 200px in size.
Put a 10px gap in between the rows of the grid and a 15px gap in between the columns of the grid.
Using the span keyword, make the box with class a take up the first two columns of the grid.
Without using span, make the box with class a take up the first two rows of the grid.
Great! Now, feel free to play around with refactoring to see how short you can make your style.css file while not changing the layout we’ve created. When you’re ready, move on to the next lesson. In the next lesson, you will learn some advanced techniques to further style your CSS grids.