From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using Flexbox to create a grid of cards

Using Flexbox to create a grid of cards - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Using Flexbox to create a grid of cards

“

- To display our cards in a grid pattern, we need to change the display property of the container that holds all of the cards. And in our markup, that container is this section here with the class "cards" and we need to change its display property to flex, just like we've done in the previous chapter. Going to cardstyles.css, I'm gonna scroll to the bottom make some space here so I can see what I'm doing. Then add in the comments, flexbox stuff, and then I'm gonna target .cards. Here I'm gonna use almost exactly the same kind of CSS markup we used when we laid out our menus because flexbox only has to do with layout, it doesn't have to do with what the items actually look like so you can use the same flexbox markup for different types of designs. I'll start by setting up display: flex; and then I'm going to set to justify-content: space-between; which I'll explain in a second. I'm gonna leave out flex wrap for now because I want to show you what happens if I don't put it in. Save it…

Contents