3 Easy Ways to Place Images Side by Side in HTML & CSS

A side by side Image Gallery:

When we have multiple images on a webpage, it is very important to put each image in its proper place so that the webpage could look more organized.

The most commonly used approach to do this is to place images side by side and in this article, we are going to learn 3 easy ways that can be used to place images side by side.

These 3 methods are as follows:

• Place images side by side using CSS Float
• Place images side by side using CSS Flexbox
• Place images side by side using CSS Grids

You can use either of the 3 methods whichever best suits you. Let’s discuss each method in detail:

Place Images Side by Side using CSS Float

This is the most commonly used approach among the developers.

The basic idea of this approach is to place each image inside a child div element and then use the float property so that these child div elements can be aligned side by side inside their parent div element.

We will apply the float: left; on each child div so that they can float to the left of their container. To give the spacing between the side-by-side images we will use the padding property.

Now, one important thing here is the number of images that you want to place in each row. This we can easily control by specifying the width of each column in percentage. Use the below formula to calculate the width of each column:

width % = 100/(Number of columns in each row)

For example, if you want only two columns inside the row, use width: 50%;. Similarly, for three columns, use width: 33.33%;, for four columns width: 25%; and so on.

Here is a fully working example with 3 images in a row:

Example:

.child{
   float: left;
   width: 33.33%;   /* Specifies 3 columns in each row */
   padding: 5px;
   box-sizing: border-box;
}
.child img{
   width: 100%;  /* Make image fit in the div */
}

Place Images Side by Side using CSS Flexbox

We can also use CSS flexbox to place images side by side. In this approach, we make the parent element a flex container by applying display: flex; on it.

This will enable us to use all features of CSS flexbox.

Here to set the initial width of each column you can either use the flex-basis property or the width property as well.

Here is a working example with CSS flexbox:

Example:

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.child{
    flex-basis: 33.33%;
    padding: 5px;
    box-sizing: border-box;
}
.child img{
   width: 100%;
}

Place Images Side by Side using CSS Grids

We can also use CSS grids to place images side by side. This method is almost similar to the flexbox method. The only difference is that here we are using CSS grids instead of flexbox.

Here we will make the parent div a grid container by applying display: grid; on it to use all features of grids.

To set the number of columns in each grid row we use the grid-template-columns property.

Here is a working example with CSS grids:

Example:

.parent{
    display: grid;
    grid-template-columns: auto auto auto; 
}
.child{
    padding: 5px;
    box-sizing: border-box;
}
.child img{
   width: 100%;
}