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 grid
grid-template-rowsdefines the number and sizes of the rows of the grid
grid-templateis a shorthand for defining both
grid-template-rowsin one line
row-gapputs blank space between the rows of the grid
column-gapputs blank space between the columns of the grid
gapis a shorthand for defining both
column-gapin one line
grid-row-endmakes elements span certain rows of the grid
grid-column-endmakes elements span certain columns of the grid
grid-areais a shorthand for
grid-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.
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.
10px gap in between the rows of the grid and a
15px gap in between the columns of the grid.
span keyword, make the box with class
a take up the first two columns of the grid.
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.