CSS Grid Basics 3 exercises

Converting a Single-Column Layout

In this exercise, you'll practice creating columns.

Starting HTML & CSS

You don't need to touch the HTML file, but it's important to understand the structure.

The markup consists of a div with an ID of container, which contains three cards.

<div id="container">
<!-- Card 1 -->

Loading exercise


0:00 All right. It's time for an exercise. We're going to get some practice creating columns. What I want you to do is take what currently looks like this, a single-column layout, no grid involved whatsoever, and turn it into this, three equally sized, 300-pixel columns.

0:17 If you look at the HTML file, it tells you, you don't need to touch anything in here, and please don't touch anything. Do what you want, but it's not going to help the exercise at all. You can at least look at the markup. There's a div with the ID of container, there's three cards in there. As you can see, we have three cards.

0:34 In the CSS file, there's a good amount of styling that you don't need to touch either. It says, START OF THE NO TOUCHING ZONE, down to END OF THE NO TOUCHING ZONE. These are just styles there to create the cards, but then ALL YOUR CODE GOES DOWN BELOW THIS LINE.

0:50 I'd like you to write the code to style the container so that we end up with a three-column layout, each column, 300 pixels. Give it a shot and I'll be back with the solution.