How TO - Align Images Side By Side

Question

I am following this tutorial on w3schools . I am creating a social site and I want to show users an explore page and I want the images to be side by side maybe 3 or 4 pics a row and then break and then show another 3 or 4. Right now it's completely off. .

As you can see, it is on top of each other and it is all on the right side of the page. What am I missing? I want it to show exactly how it looks on the example.

<div class="row">
<?php

    // output data of each row
    while ($explore_image->fetch()) {

        if ($userLoggedIn != $added_by) {

            if (!empty($image)) {
                echo '<div class="row"><div class="explore_column">';
                echo "<a href='$image'><img src='$image' ></a><p> $added_by $likes </p></br><br><br><br></div></div><br>";
            }
        }
    }
    
    $explore_image->close();
    $con->close();

?>
</div>
* {
box-sizing: border-box;
}

.row {
display: flex;
}

/* Create three equal columns that sits next to each other */
.explore_column {
flex: 100.33%;
padding: 5px;
}

@media screen and (max-width: 500px) {
.explore_column {
width: 100%;
}
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.explore_column {
float: left;
width: 33.33%;
padding: 5px;
}

/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}

Answer 1

You could try to implement styling as below:

 div { display: flex; flex-wrap: wrap; } img { flex: 1 0 20%; width: 20%; margin: 5px; }

 <div> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> </div>

---

You can adjust the % to your needs.

Answer 2

As Jakub said, keep the display set to flex, but also add

flex-direction: row;

that might help