Learn how to build a grid of images using flexbox and the flex-wrap property.

Flexbox allows us to build one-dimensional layouts where we have control over how we're going to display items.

Items can be laid out horizontally (row) or vertically (column) inside a flex container. The default behavior for a flex container is to lay items in a single row.

Adding `flex-wrap: wrap` to the flex container will allow the items to wrap onto multiple lines depending on the available width.

https://app.egghead.io/api/v1/lessons/css-create-a-responsive-image-grid-using-css-flexbox-without-using-media-queries/subtitles

Create a Responsive Image Grid Using CSS Flexbox without Using Media Queries

Mahmoud Abdelwahab: [0:00] This is the HTML markup that we have. We have a parent div with a class called wrapper. Inside of it, we have three children, each with a class called card. Each card has an image and a title, so image and the title.

[0:15] Let's take a look at the CSS. Setting the display property for the parent div to flex automatically places the children in a row. However, we have unwanted horizontal scroll. By sending the flex-wrap property to wrap, the children will wrap on to multiple lines, instead of being forced into a single one.

[0:33] Finally, adding justify-content: center will center the children inside the parent container. Now we have a responsive grid without using any media queries.

Create a Responsive Image Grid Using CSS Flexbox without Using Media Queries

Share this video with your friends