How to create a responsive mosaic gallery with CSS without Javascript

In this tutorial I will teach you how to create an asymmetric mosaic photo gallery using only CSS without javascript and still being responsive. Yes! it is possible and it is simpler than you think.

It is very common to find several mosaic solutions using Javascript and ready-made libraries, Masonry is one of the most used. But in CSS it is possible to do a lot of things in a lighter and more creative way to achieve very similar or even better results. By using pure CSS we end up loading less code and having a lighter and faster website. So let's go?

See the code result in JSFiddle

Study and develop your HTML and CSS

Buy

Create a basic HTML page

Use your editor to create a simple page where we will build our mosaic image gallery in it.

Add the DIV that will be our image container

In the code below we created a <div> with the id grid and inside it we put several <img> images with just the src for the image, notice that in some images there is span-2 class that we will talk about later in this tutorial. Add this code inside the on the page body created in the previous step.

Full HTML code

Bringing mosaic to life with CSS

Now, let's start creating the file in CSS. You can do it the way you prefer by adding a separate file in the head or creating the <style> tag within the same file. Here we will use the <style> tag to simplify it.

We started by adding a small code just to remove the margins and change the background color of the document. This does not affect our mosaic at all.

Main Container CSS

In our div, that is the container of our images, there is the id grid and we will use it in css to define the styles of the container. We will use the grid layout to make our mosaic.

Then we defined the display as a grid and added some styles that will define the behavior of the images inside the container.

This style defines the size of the images in line / horizontal function. repeat repeats the size for x number of images, auto-fill determines that size automatically and minmax is a function that calculates the size respecting the 300px and ignoring it if the images are larger.

This line does the same as the previous one but in columns / vertical.

This line controls an automatic positioning algorithm and the dense property always tries to fill the 'holes'.

These styles define the spacing between images in rows and columns.

Defining the style of the images inside the container

Here it is simpler. We are applying a style to the images inside the grid. We are only setting the size and height to 100% and the object-fit makes the image fill all spaces always regardless of its size.

To end our tutorial, we create a class called span-2. These styles define what is the final space the image can reach. I know it's a little confusing but you should understand the span value as parts! Below you can see that the span in the column is 1, therefore, it occupies part of the horizontal and 2 in the vertical. In other words, all images that posesses this class will occupy larger spaces vertically creating the mosaic.

When to use the span-2 class?

This is where you need to be creative. In my example, I manually defined the span-2 class in each image but you can make a code either in PHP or Javascript that calculates the size of the images and if the image height is greater than the width, you must define the span-2 class. By doing so all images that are taller take up more space in the mosaic.

Complete Code

View the code in JSFiddle

Study and develop your HTML and CSS

Buy