Skip to Content
Learn
CSS Grid Essentials
Review

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 grid
  • grid-template-rows defines the number and sizes of the rows of the grid
  • grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line
  • grid-gap puts blank space between rows and/or columns of the grid
  • grid-row-start and grid-row-end makes elements span certain rows of the grid
  • grid-column-start and grid-column-end makes elements span certain columns of the grid
  • grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and 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.

Instructions

1.

Let’s start by making this bunch of divs into a grid. Set the display property of the div with class grid to the value necessary to make it a CSS grid.

2.

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.

3.

Give the grid two rows, both 200px in size.

4.

Put a 10px gap in between the rows of the grid and a 15px gap in between the columns of the grid.

5.

Make the box with class a take up the first two columns of the grid.

6.

Make the box with class a take up the first two rows of the grid.

7.

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.

Folder Icon

Take this course for free

Already have an account?