Creating Responsive Grids 3 exercises

Practice Defining a Responsive Layout

Here we have a single column layout containing multiple cards.

Each card consists of an H2, a paragraph, and a box shadow:


Loading exercise


0:00 For this exercise, I'd like you to take this single-column layout, which is just a bunch of these cards. A card is just an h2, a paragraph, a little box shadow. Currently, we have a single column of cards, no matter what.

0:13 I'd like you to turn it into this, where we have some number of columns ranging from 1 to 2 to 3 to 4, and potentially increasing depending on the width of the screen, where each column is a minimum of 250 pixels wide. We let the browser fit as many as it can into a single row.

0:34 It's only a single line you're going to have to write. You don't need to touch the HTML. You don't need to touch much in the CSS. I've already set up the grid, so display is grid, gap is 30 pixels, just to add some space. I need you to define the columns.

0:48 Again, it should be an unknown number. It's not three or four or five. It's not hardcoded. It's some number that the browser figures out automatically using the keyword we just learned, where each column is a minimum of 250 pixels wide.

1:01 Fit as many as you can into a single row, and then have them wrap onto a new row, if needed.