CSS Grid Basics 3 exercises

Implement a Three-Column Layout

Creating a Three Column Layout with CSS Grid

The first thing to do is turn on grid for the container by setting its display property to grid:

#container {
display: grid;

After doing this, you might notice a small difference in the layout, but it will still appear as a single col

Loading solution


0:00 To create our three-column layout here, the first thing we have to do is turn on grid. Currently we have our container, but it is not a grid container, so I need to set display to grid.

0:12 Once I do that, I guess we see a little difference but not a whole lot. Because it's still a single column, I now need to make it a three-column layout.

0:20 I want to each column to be 300 pixels, so we use grid-template-columns, and then 300 pixels for my first column, 300 pixels for the second, and 300 pixels for the third column.

0:33 There we are. We have a three-column layout, evenly sized. Each one happens to be hard-coded at 300 pixels, but that was what the exercise asked for.