Our page features several images toward the bottom.

And one of the most common design patterns used to display a collection of images

is a grid of rows and columns typically called an image gallery.

The first image is in the upper-left.

Then subsequent images are presented from left to right.

And then, when there is no more space, the next row begins below the first row.

Our mock-up only contains a few images, but

this is a prototype for a social network for designers.

And while one designer's page may only have a handful of images,

another's might have hundreds.

When prototyping in a web browser, it's important to consider how different

areas of a page might change with varying amounts of content.

When this prototype is made into a real web application using a back-end

programming language, the content will be dynamically generated from database,

and the information from page to page might vary quite a bit.

That means we need a gallery design that's flexible enough

to handle any number of images.

We could create a grid of images using Bootstrap's system of rows and

columns, but this would break quickly.

There will be an arbitrary number of images and an arbitrary number of rows.

It's not something we can predict ahead of time and we want these images to display

left to right and then wrap around to the next row.

Instead, we're going to do this using a flex box container,

that way we can control how the images are displayed using CSS,

and the HTML can change freely.

Similar to the navigation at the top, we're going to use d-flex and

flex-wrap classes on the gallery section.

So, just after the gallery class,

we'll add the d-flex class and the flex-wrap class.

This won't do anything on the page just yet

because the elements inside the flex container don't have any height or color.

Let's jump into the CSS and add some styling.

So I'll save the index.html file, and let's switch over to style.css.

And first, I'm going to style the anchor elements surrounding the images because

once any images are inside, they should just fill the width of the container.

I want these images to be in two columns, so their width should be at 50%.

However, I also want a 1% margin on all sides, so

that means we need to subtract 1% from both sides of each image,

giving us a total of 48% for each image.

So, that's a little bit complicated.

Don't worry if you got lost with that explanation.

We are going to type that out, and it might make a little more sense.

So we will select the gallery class, and

then we want to target the anchor elements inside of the gallery class.

And we're going to give them a width of 48%.

So each one will take up 48% of the width of their parent container,

meaning that there will be two side by side with a remainder

of 4% total because there's two of them.

And then we'll give each one a margin of 1% on the top, right,

bottom, and left, so all four sides of each gallery element.

So that means on the left side, we'll add 1%.

On the right side, we'll add 1% for a total of 2.

And if you add 2 to 48, that will bring you up to 50, so

that each one is taking up half the page side-by-side.

We still won't have any height, and

we also won't be able to see them because they're transparent in line elements.

So let's make them block elements and add some color.

So I'll make some space to work here.

Just add some space at the bottom, and

let's give these a height that's relative, we'll say 10rems.

And then we'll set the background to sort of a middle red,

a middle green, and a bright blue.

And then we'll say display, block.

So let's save this, and then preview it in the browser, see how it looks.

And if we scroll down, we can now see our gallery images.

And this is really for the mobile version of the site,

so I'll size this down a bit.

And that's what our gallery images will look like.

And this is nice because when we increase the size of the browser,

even at these smallest responsive break point,

the images will still increase in size and allow us to display

the largest possible image while maintaining the same margin.

So there is no wasted space.

There's still a problem, though.

We added a 1% margin to each side of each gallery element.

And now, a whole gallery isn't flush against the left and

right sides of the container.

You can see how the featured image and

the profile image are hanging over the left side.

And here, you can see same thing with the featured image and

this button are hanging over the right side.

So there's a little space here and it's not flush against the edge.

We can't simply change the margins on each gallery item because when we get to

these larger responsive sizes, we're going to add more columns to the gallery.

Instead, what we can do is subtract margin from the container,

or the parent element, on the left and rights sides.

So, let's do that now.

We'll switch back to style.css.

And I'll select just the gallery, or the parent element.

And we'll give it a margin of 2rems on the top

to sort of push it away from the profile section,

minus 1% on the left and right sides.

So that's going to make up for this extra 1% that's on the furthest

left column and the 1% that's on the furthest right column.

And then zero.

And the syntax where we have three numbers means that the first one will be on

the top, the second number will be for the left and right sides, and

the third one will be for the bottom.

So there will be no margin on the bottom.

So if we save this, we refresh the page, watch the left and right sides.

It looks like it wasn't fixed, and

that's because there's a space between the dot and the gallery.

So let's try that again, we'll save it.

Switch back.

And now you can see that that margin has been subtracted correctly.

These two column arrangement works nicely for

mobile, but it doesn't look very good at larger sizes.

We have these large images and

it would be nicer if they were just more columns of images.

So let's fix that by adding some media queries.

So just below our existing CSS, I will type

@media all and

set a min-width of 576 pixels.

That is a Bootstrap responsive break point.

And I'll say gallery, and the anchor element's inside the gallery, and

we'll change the width.

And that's the only thing we need to change because we can just maintain this

same 1% margin and the same height and all of the other styling we already have.

So this time, we'll say 31.3%,

which is a little bit of a weird number, but

that will break it up into three columns of 33.3% of each column.

Because remember, we're adding 2 to the total, so this will be 33

because we're adding margin on the left and right and top and bottom.

So next, let's just copy that media query.

And we just need to do the same math for four columns.

So we'll change this min-width to 992 pixels.

And we want this to add up to a total of 25.

And remember, we're adding 2, so that gives us 23%.

So let's save that.

And again, these are both responsive breakpoints used by Bootstrap.

And this will split the medium size into three columns and

the largest size into four columns.

So let's switch back to the browser.

And refresh.

We have a four column layout At the largest size.

And then it goes down to a three column layout, these medium sizes.

And then it goes down to a two column layout at the smallest size.

So there's two columns, three columns, and then four columns.

So this looks good.

We can get images in there later if we want to test the robustness

of the prototype with real data, but I think this is good enough for now.