Simple Gallery Tutorial (CSS)

Square Image Gallery

jump to rectangular gallery

home

I've tried multiple ways of making galleries, but the easiest one I can center that also adjusts to screen size is flexbox.

Flexbox simply refers to a div styled with display: flex; and the elements inside of it.

.gallery {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;}
  
.gallery img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid darkolivegreen;
  background: yellowgreen;
  margin: 2px;}
  
.gallery img:hover {
  object-fit: contain;}

.gallery {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;}

• Your gallery doesn't have to have a set width, it could also have margins or padding if you want it narrower than the element holding it
• display: flex; gives us some extra properties we can use to style the gallery with
• flex-wrap: wrap; is very important for a gallery, otherwise it would look like this:

• I like justify-content: center; for positioning the gallery in the center of the screen no matter the size of the screen
  • this is one of those special properties we can use with display: flex;

If you want your gallery left aligned you don't even have to bother with flexbox, a normal div will do just fine:

.gallery img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid darkolivegreen;
  background: yellowgreen;
  margin: 2px;}

• .gallery img {} selects all image elements within an element with the gallery class - this is useful if you have images on your page that are not part of the gallery, that you want styled differently
• I make my images square simply because that is what is easiest to arrange into a gallery
• not all of my source images are square however, so I use object-fit: cover; to crop the image without squishing their dimensions
• The other properties are simply stylistic preferences

Without object-fit: cover; we get this: (stretched and squished pictures).

I still want the viewer to see the full image however, so I changed the object-fit: when the user hovers over the image.

.gallery img:hover {
  object-fit: contain;}

• just like you can change link color on hover (a:hover) you can also change image properties on hover img:hover
• contain makes it so that the full image is shown within the dimensions, but it is not stretched or squished, leaving space between the image and the chosen dimensions

If all of your images have the same ratio, you don't need to worry about this, just set the width and height to be the same for each image (rectangles even work).

Rectangular Image Gallery

Rectangular galleries allow you to see every image in full, but they are a little more tricky to get looking nice.

.gallery2 {
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;}
.gallery2 img {
  width: 100px;
  border: 1.5px solid darkolivegreen;
  margin: 2px;}

Here the images are organized into columns, all the same width so that the edges of the gallery are straight.

• flex-direction: column; puts the images into columns
• align-content: center; is used to put the columns in the center of the gallery - this is used instead of justify-content: center;
  • adding justify-content: center; would center the columns vertically, meaning they would not be flush with the top edge
• since the images are not cropped into squares, I didn't do anything with hover or object fit

Column based rectangular galleries look the best in my opinion, but if you want your pictures organized in a particular sequence, they are tricky. Thus heres a row based rectangular gallery:

.basic {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;}  
.basic img {
  height: 100px;
  border: 1.5px solid darkolivegreen;
  margin: 2px;}

This is very similar to the square gallery, with the gallery div using the same properties (flex really only used to center the images), but of course the images are rectangles. The images are given a set height rather than width, because they are in rows rather than columns (contrasting to the first rectangular gallery).

This is not my favorite aesthetically, as I prefer to have the sides flat, but it is an option.

This is about as basic as you can get without just dumping the images. They aren't in a flexbox, the images are just given the same height so they fit somewhat neater together .basic2 img { height: 100px;}. The previous example is based off of this, but it uses flexbox so the rows can be centered.