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-columns
defines the number and sizes of the columns of the gridgrid-template-rows
defines the number and sizes of the rows of the gridgrid-template
is a shorthand for defining bothgrid-template-columns
andgrid-template-rows
in one linerow-gap
puts blank space between the rows of the gridcolumn-gap
puts blank space between the columns of the gridgap
is a shorthand for defining bothrow-gap
andcolumn-gap
in one linegrid-row-start
andgrid-row-end
makes elements span certain rows of the gridgrid-column-start
andgrid-column-end
makes elements span certain columns of the gridgrid-area
is 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.