Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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 left to right, and then when there's no more space, the next row begins below the first row.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Our page features several
images toward the bottom.
0:00
And one of the most common design patterns
used to display a collection of images
0:04
is a grid of rows and
columns typically called an image gallery.
0:09
The first image is in the upper-left.
0:15
Then subsequent images
are presented from left to right.
0:18
And then, when there is no more space,
the next row begins below the first row.
0:22
Our mock-up only contains a few images,
but
0:28
this is a prototype for
a social network for designers.
0:32
And while one designer's page may
only have a handful of images,
0:36
another's might have hundreds.
0:40
When prototyping in a web browser,
it's important to consider how different
0:42
areas of a page might change
with varying amounts of content.
0:47
When this prototype is made into a real
web application using a back-end
0:52
programming language, the content will
be dynamically generated from database,
0:57
and the information from page
to page might vary quite a bit.
1:02
That means we need a gallery
design that's flexible enough
1:06
to handle any number of images.
1:11
We could create a grid of images
using Bootstrap's system of rows and
1:14
columns, but this would break quickly.
1:19
There will be an arbitrary number of
images and an arbitrary number of rows.
1:22
It's not something we can predict ahead of
time and we want these images to display
1:27
left to right and
then wrap around to the next row.
1:32
Instead, we're going to do this
using a flex box container,
1:36
that way we can control how
the images are displayed using CSS,
1:41
and the HTML can change freely.
1:45
Similar to the navigation at the top,
we're going to use d-flex and
1:49
flex-wrap classes on the gallery section.
1:56
So, just after the gallery class,
2:01
we'll add the d-flex class and
the flex-wrap class.
2:05
This won't do anything
on the page just yet
2:12
because the elements inside the flex
container don't have any height or color.
2:15
Let's jump into the CSS and
add some styling.
2:20
So I'll save the index.html file,
and let's switch over to style.css.
2:24
And first, I'm going to style the anchor
elements surrounding the images because
2:30
once any images are inside, they should
just fill the width of the container.
2:36
I want these images to be in two columns,
so their width should be at 50%.
2:41
However, I also want a 1%
margin on all sides, so
2:47
that means we need to subtract 1%
from both sides of each image,
2:52
giving us a total of 48% for each image.
2:59
So, that's a little bit complicated.
3:04
Don't worry if you got lost
with that explanation.
3:06
We are going to type that out, and
it might make a little more sense.
3:10
So we will select the gallery class, and
3:13
then we want to target the anchor
elements inside of the gallery class.
3:17
And we're going to give
them a width of 48%.
3:25
So each one will take up 48% of
the width of their parent container,
3:32
meaning that there will be two
side by side with a remainder
3:37
of 4% total because there's two of them.
3:42
And then we'll give each one
a margin of 1% on the top, right,
3:50
bottom, and left, so
all four sides of each gallery element.
3:55
So that means on the left side,
we'll add 1%.
4:01
On the right side,
we'll add 1% for a total of 2.
4:05
And if you add 2 to 48,
that will bring you up to 50, so
4:08
that each one is taking up
half the page side-by-side.
4:14
We still won't have any height, and
4:19
we also won't be able to see them because
they're transparent in line elements.
4:21
So let's make them block elements and
add some color.
4:25
So I'll make some space to work here.
4:29
Just add some space at the bottom, and
4:32
let's give these a height that's relative,
we'll say 10rems.
4:36
And then we'll set the background
to sort of a middle red,
4:42
a middle green, and a bright blue.
4:48
And then we'll say display, block.
4:54
So let's save this, and then preview
it in the browser, see how it looks.
4:58
And if we scroll down,
we can now see our gallery images.
5:03
And this is really for
the mobile version of the site,
5:09
so I'll size this down a bit.
5:14
And that's what our gallery
images will look like.
5:16
And this is nice because when we
increase the size of the browser,
5:20
even at these smallest
responsive break point,
5:25
the images will still increase in size and
allow us to display
5:29
the largest possible image while
maintaining the same margin.
5:34
So there is no wasted space.
5:40
There's still a problem, though.
5:44
We added a 1% margin to each
side of each gallery element.
5:46
And now, a whole gallery isn't
flush against the left and
5:52
right sides of the container.
5:57
You can see how the featured image and
5:58
the profile image are hanging
over the left side.
6:02
And here, you can see same thing
with the featured image and
6:05
this button are hanging
over the right side.
6:08
So there's a little space here and
it's not flush against the edge.
6:10
We can't simply change the margins on
each gallery item because when we get to
6:16
these larger responsive sizes, we're
going to add more columns to the gallery.
6:21
Instead, what we can do is subtract
margin from the container,
6:28
or the parent element,
on the left and rights sides.
6:33
So, let's do that now.
6:37
We'll switch back to style.css.
6:39
And I'll select just the gallery,
or the parent element.
6:44
And we'll give it a margin
of 2rems on the top
6:51
to sort of push it away
from the profile section,
6:56
minus 1% on the left and right sides.
7:02
So that's going to make up for
this extra 1% that's on the furthest
7:07
left column and the 1% that's
on the furthest right column.
7:11
And then zero.
7:17
And the syntax where we have three numbers
means that the first one will be on
7:19
the top, the second number will be for
the left and right sides, and
7:24
the third one will be for the bottom.
7:28
So there will be no margin on the bottom.
7:30
So if we save this, we refresh the page,
watch the left and right sides.
7:34
It looks like it wasn't fixed, and
7:39
that's because there's a space
between the dot and the gallery.
7:42
So let's try that again, we'll save it.
7:47
Switch back.
7:48
And now you can see that that margin
has been subtracted correctly.
7:51
These two column arrangement
works nicely for
7:57
mobile, but
it doesn't look very good at larger sizes.
8:00
We have these large images and
8:04
it would be nicer if they were
just more columns of images.
8:06
So let's fix that by
adding some media queries.
8:11
So just below our existing CSS,
I will type
8:15
@media all and
8:21
set a min-width of 576 pixels.
8:25
That is a Bootstrap
responsive break point.
8:31
And I'll say gallery, and the anchor
element's inside the gallery, and
8:37
we'll change the width.
8:42
And that's the only thing we need to
change because we can just maintain this
8:44
same 1% margin and the same height and
all of the other styling we already have.
8:48
So this time, we'll say 31.3%,
8:53
which is a little bit of a weird number,
but
8:57
that will break it up into three
columns of 33.3% of each column.
9:01
Because remember, we're adding 2
to the total, so this will be 33
9:08
because we're adding margin on
the left and right and top and bottom.
9:13
So next, let's just copy that media query.
9:20
And we just need to do the same math for
four columns.
9:23
So we'll change this
min-width to 992 pixels.
9:30
And we want this to add
up to a total of 25.
9:34
And remember, we're adding 2,
so that gives us 23%.
9:39
So let's save that.
9:47
And again, these are both responsive
breakpoints used by Bootstrap.
9:50
And this will split the medium
size into three columns and
9:56
the largest size into four columns.
10:00
So let's switch back to the browser.
10:03
And refresh.
10:05
We have a four column
layout At the largest size.
10:06
And then it goes down to a three
column layout, these medium sizes.
10:11
And then it goes down to a two
column layout at the smallest size.
10:14
So there's two columns,
three columns, and then four columns.
10:19
So this looks good.
10:26
We can get images in there later
if we want to test the robustness
10:27
of the prototype with real data, but
I think this is good enough for now.
10:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up