How to Align Images Side By Side using CSS ?

Last Updated : 29 Oct, 2024

Images side by side means placing multiple images in a single row next to each other. This arrangement shows images in a horizontal line, making it great for photo galleries, and comparing pictures. To align images side by side using CSS, we can use flexbox or grid for layout.

Table of Content

Using the float Property
Using Flexbox
Using CSS Grid

Align Images Side By Side using float Property

The float property is a traditional approach for aligning images side by side. It allows you to place elements next to each other by floating them left or right.

Syntax

float: left;

Example: Aligning images side by side using float property.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .column {
            float: left;
            width: 30%;

        }

        img {
            width: 80%
        }
    </style>
</head>

<body>
    <div class="column">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331171125/qq2.png">
    </div>
    <div class="column">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331171125/qq2.png">
    </div>
    <div class="column">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331171125/qq2.png">
    </div>
</body>

</html>

Output

Align Images Side By Side using Flexbox

Flexbox is a modern and powerful layout tool that makes it easier to align elements horizontally and vertically. By using the flexbox we can align images side by side.

Syntax

.content {
    justify-content: space-around;
    align-items: center;
    display: flex;
    flex-direction: row;
}

Example: Aligning images side by side using Flexbox.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .content {
            justify-content: space-around;
            align-items: center;
            display: flex;
            flex-direction: row;
        }

        img {
            width: 80%;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="box">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331171125/qq2.png">
        </div>
        <div class="box">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331173230/qq1.png">
        </div>
        <div class="box">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331173344/qq3.png">
        </div>
    </div>
</body>

</html>

Output

Align Images Side By Side using CSS Grid

CSS Grid is another powerful layout system that allows you to align elements in a grid format. It is particularly useful for creating complex layouts with multiple rows and columns.

Syntax

.grid-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

Example: Aligning images side by side using CSS Grid.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-content {
            width: 100%;
            height: 100vh;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }

        img {
            width: 80%;
        }
    </style>
</head>

<body>
    <div class="grid-content">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331173344/qq3.png">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331173230/qq1.png">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20230331171125/qq2.png">
    </div>
</body>

</html>