Grid image gallery in CSS, in 5 minutes

With the onset of CSS3, it has become way easier to implement a complex image gallery. Before that, it was pretty hard to format even a simple grid layout. Now that it’s easy to layout a grid image gallery in CSS, let’s get to the coding part without wasting another second of your time.

About the image gallery grid

The above image gallery grid is purely made in HTML and CSS. Also, there is no javascript in it. The grid contains 14 images of different sizes. The image gallery is responsive and the images don’t lose their aspect ratio upon resizing the window or changing the device.

The image gallery is put with a CSS grid and the images are laid out inside the grid columns and rows based on their aspect ratio. The grid contains 8 columns and 7 rows. The image gallery also has a grid-gap of 15px.

Creating an image gallery with CSS grid

HTML CODE:

<section class="gallery">


            <figure class="gallery__item gallery__item--1"><img src="img/gal-1.jpeg" alt="Gallery Image 1" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--2"><img src="img/gal-2.jpeg" alt="Gallery Image 2" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--3"><img src="img/gal-3.jpeg" alt="Gallery Image 3" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--4"><img src="img/gal-4.jpeg" alt="Gallery Image 4" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--5"><img src="img/gal-5.jpeg" alt="Gallery Image 5" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--6"><img src="img/gal-6.jpeg" alt="Gallery Image 6" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--7"><img src="img/gal-7.jpeg" alt="Gallery Image 7" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--8"><img src="img/gal-8.jpeg" alt="Gallery Image 8" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--9"><img src="img/gal-9.jpeg" alt="Gallery Image 9" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--10"><img src="img/gal-10.jpeg" alt="Gallery Image 10" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--11"><img src="img/gal-11.jpeg" alt="Gallery Image 11" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--12"><img src="img/gal-12.jpeg" alt="Gallery Image 12" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--13"><img src="img/gal-13.jpeg" alt="Gallery Image 13" class="gallery__img"></figure>
            <figure class="gallery__item gallery__item--14"><img src="img/gal-14.jpeg" alt="Gallery Image 14" class="gallery__img"></figure>
            
        </section>

About the css image gallery HTML

The HTML of the image grid contains a section of 14 figure elements. Each figure has a class of “gallery__item” and “gallery__item- {figure-no}. Each figure item contains an img element with a CSS class of gallery__img. Make sure that you change the image src to your images after copying the HTML code. And in case if you’re wondering about the class syntax of these HTML elements, it’s BEM notation. BEM stands for block, element, and modifier. Read more here.

SCSS CODE:

.gallery {
    background-color: #f9f7f6;



    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 5vw);
    grid-gap: 1.5rem;
    padding: 1.5rem;

    &__item {
        &--1 {
            grid-row: 1 / span 2;
            grid-column: 1 / span 2;
        }

        &--2 {
            grid-row: 1 / span 3;
            grid-column: 3 / span 3;
        }
        &--3 {
            grid-row: 1 / span 2;
            grid-column: 6 / 7;
        }

        &--4 {
            grid-row: 1 / span 2;
            grid-column: 7 / -1;
        }

        &--5 {
            grid-row: 3 / span 3;
            grid-column: 1 / 3;
        }

        &--6 {
            grid-row: 4 / span 2;
            grid-column: 3 / 5;
        }

        &--7 {
            grid-row: 4 / 5;
            grid-column: 5 / 6;
        }

        &--8 {
            grid-row: 3 / 5;
            grid-column: 6 / 8;
        }

        &--9 {
            grid-row: 3 / 6;
            grid-column: 8 / -1;
        }

        &--10 {
            grid-row: 6 / 8;
            grid-column: 1 / 2;
        }

        &--11 {
            grid-row: 6 / 8;
            grid-column: 2 / 4;
        }

        &--12 {
            grid-row: 6 / 8;
            grid-column: 4 / 5;
        }

        &--13 {
            grid-row: 5/ 8;
            grid-column: 5 / 8;
        }

        &--14 {
            grid-row: 6 / 8;
            grid-column: 8 / -1;
        }


    }

    &__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

In case you don’t know about scss. Please refer to the normal CSS given below.

Want to learn a CSS framework but don’t know which one, consider reading Scss vs Bootstrap vs Tailwind CSS

CSS CODE:

.gallery {
  background-color: #f9f7f6;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 5vw);
  grid-gap: 1.5rem;
  padding: 1.5rem; 
}

.gallery__item--1 {
    grid-row: 1 / span 2;
    grid-column: 1 / span 2; 
}

  .gallery__item--2 {
    grid-row: 1 / span 3;
    grid-column: 3 / span 3; 
}

  .gallery__item--3 {
    grid-row: 1 / span 2;
    grid-column: 6 / 7; 
}

  .gallery__item--4 {
    grid-row: 1 / span 2;
    grid-column: 7 / -1; 
}

  .gallery__item--5 {
    grid-row: 3 / span 3;
    grid-column: 1 / 3; 
}

  .gallery__item--6 {
    grid-row: 4 / span 2;
    grid-column: 3 / 5; 
}

  .gallery__item--7 {
    grid-row: 4 / 5;
    grid-column: 5 / 6; 
}

  .gallery__item--8 {
    grid-row: 3 / 5;
    grid-column: 6 / 8; 
}

  .gallery__item--9 {
    grid-row: 3 / 6;
    grid-column: 8 / -1; 
}

  .gallery__item--10 {
    grid-row: 6 / 8;
    grid-column: 1 / 2; 
}

  .gallery__item--11 {
    grid-row: 6 / 8;
    grid-column: 2 / 4; 
}

  .gallery__item--12 {
    grid-row: 6 / 8;
    grid-column: 4 / 5; 
}

  .gallery__item--13 {
    grid-row: 5/ 8;
    grid-column: 5 / 8; 
}

  .gallery__item--14 {
    grid-row: 6 / 8;
    grid-column: 8 / -1; 
}

  .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
}
 

About the css image gallery CSS code

The pure CSS image gallery is made with pure CSS grids. The CSS grid contains 8 columns and 7 rows. The images are based on their aspect ratio. The grid is completely responsive and works just fine both on low-width and high-width devices. Also read, 10 CSS pro tips, code this not that

Gallery grid container (.gallery)

The gallery section is the parent element of the 14 figure elements. So, its display property is grid. The grid now has 8 columns of equal length. While 1fr is 1/8 of the total height of the image gallery. Similarly, it’s divided into 7 columns of 5vw while 5vw is 5% of the total viewport width. The image gallery grid has a grid-gap and padding of 1.5 rem or 15px to create an equal gap outside and between the individual images.

grid items(.gallery__item)

The grid items are put in the grid containers according to their aspect ratio. You can change the line numbers according to your need. Also, the property object-fit puts the images into the containers without overflowing or running short of them. But make sure that you specify the height and width of images manually, or the object-fit will have no impact on the images.

CSS concepts used above.

Responsive CSS grid:

CSS grid layout module offers a two-dimensional grid-based layout system, made up of rows and columns. Read more here.

.grid-container {
     display: grid;
}

Grid template columns and rows:

Grid template columns and rows are specific properties related to CSS grids. Columns specify the number of columns and rows specify the number of rows.

.grid-container {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 1fr);
}

In the above example, the grid contains 8 grid columns and 7 grid rows of 1fr. While 1fr would be the fraction of the total width and height of the container respectively.

Grid-row and Grid-column:

Grid row and grid column are grid item-specific properties. Grid row helps in putting grid items in specific rows while a grid column helps in putting grid-item into specific columns.

.grid-item-1 {
    grid-row: 1 / 4;
    grid-column: 1 / span 4;
}

In the above example, grid-item-1 starts from column line no 1 and ends at column line no 4.

Also, it starts at column line number 1 and spans across 4 columns. It can also be specified by using 1 / 5.

Conculsion:

It’s not hard to implement an image gallery in pure CSS. The code written in this tutorial is simple and clean. Also, you can change it to your need. In addition to the simple code, it is also based on modern CSS concepts.