How to auto add images into the superior line if they fit-CodePudding

I know that this may sound a little stupid. I have some images on my website and I want them to go to the line they fit. (I have 3 images on top but in a phone there would be only one but on bigger monitors 4, and I don't want to use JavaScript)

.rows>* {
    display: table;
    width: 70px;
    margin-right: 0%;

}

.rows img {
    border-radius: 25px;
    height: 15em;
    width: 25em;
    object-fit: cover;
    margin: 10px 10px 0px 10px;
    transition: 
        box-shadow .25s, 
        transform .25s;

}

h3 {
    font-weight: 100;
    text-align: center;
    font-size: 1.5em;
    margin-top: 0.2em;
    margin-bottom: 10px;
}

.rows img:hover {
    cursor: pointer;
    box-shadow: 
        2px 1px 
        rgba(0, 0, 0, 1), 
        4px 3px 
        rgba(0, 0, 0, 0.9), 
        6px 7px
        rgba(0, 0, 0, 0.8),
        7px 8px 
        rgba(0, 0, 0, 0.7), 
        11px 10px 
        rgba(0, 0, 0, 0.6), 
        12px 11px 
        rgba(0, 0, 0, 0.5),
        14px 13px 
        rgba(0, 0, 0, 0.4), 
        16px 17px 
        rgba(0, 0, 0, 0.3), 
        19px 18px
        rgba(0, 0, 0, 0.2),
        19px 20px 
        rgba(0, 0, 0, 0.1);
    transform: 
        rotate(5deg)
        skew(-1deg, -3deg);
    transition: 
        box-shadow .5s, 
        transform .375s;

}

<div >


    <div><a href="">
        <img src="https://i.blogs.es/9cd4b9/1366_2000/840_560.jpg" alt="">
        <h3>Valorant</h3>
    </a></div>
    <div><a href="">
        <img src="https://cdn1.epicgames.com/offer/fn/PDP_2560x1440_2560x1440-bec2627607d1aeae77fc43d495900ddf" alt="">
        <h3>Fortnite</h3>
    </a></div>
    <div><a href="">
        <img src="https://phantom-marca.unidadeditorial.es/abfd01e815b28d5553ed7ba9fa2e9647/crop/0x0/1980x1112/resize/1320/f/jpg/assets/multimedia/imagenes/2022/03/16/16474267987028.jpg" alt="">
        <h3>League of Legends</h3>
    </a></div>
    <div><a href="">
        <img src="https://fs-prod-cdn.nintendo-europe.com/media/images/10_share_images/games_15/nintendo_switch_4/H2x1_NSwitch_Minecraft_image1600w.jpg" alt="">
        <h3>Minecraft</h3>
    </a></div>
    <div><a href="">
        <img src="https://hipertextual.com/wp-content/uploads/2022/01/call-of-duty.jpeg" alt="">
        <h3>Call of Duty</h3>
    </a></div>
    <div><a href="">
            <img src="https://cdn1.dotesports.com/wp-content/uploads/sites/4/2022/02/22143447/Garena-Free-Fire.jpg" alt="">
            <h3>Free Fire</h3>
    </a></div>
    <div><a href="">
        <img src="https://as01.epimg.net/meristation/imagenes/2021/12/12/noticias/1639306655_172365_1639307441_noticia_normal_recorte1.jpg" alt="">
        <h3>Genshin Impact</h3>
    </a></div>
    <div><a href="">
        <img src="https://pbs.twimg.com/media/FDgyy4fX0AAN_qb?format=jpg&name=small" alt="">
        <h3>Clash Royale</h3>
    </a></div>
    <div><a href="">
        <img src="https://theme.zdassets.com/theme_assets/1094427/189dce017fb19e3ca1b94b2095d519cc514df22c.jpg" alt="">
        <h3>Rocket league</h3>
    </a></div>
    <div><a href="">
        <img src="https://i.blogs.es/2787ba/robloxa/1366_2000.jpeg" alt="">
        <h3>Roblox</h3>
    </a></div>
    <div><a href="">
        <img src="https://play-lh.googleusercontent.com/bUg34NePWclty0hnX2bGZVPCsjsC-6VyQ4fHW9vpNFqSKAYRfa4fICuVWb4awKpsoT0" alt="">
        <h3>Clash of Clans</h3>
    </a></div>
    <div><a href="">
        <img src="https://img.redbull.com/images/c_limit,w_1500,h_1000,f_auto,q_auto/redbullcom/2018/12/14/7518db4d-58a6-4868-aa3c-748ad1dd6dd7/brawl-stars" alt="">
        <h3>brawl stars</h3>
    </a></div>
</div>

I want to make them like if it was a normal text that goes down automatically not that you have to program it too (for example display:inline, but it doesn't work)

Don't mind the content though :)

Thanks

CodePudding user response：

It's not a stupid question, what you mean Is responsiveness? So basically on a phone the images are displayed beneath each other, but on a laptop next to each other... and on a bigger monitor even more spread next each other?

If so.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

https://www.w3schools.com/html/html_responsive.asp

EDIT: By the way, If you go into developer tools there is a phone-tablet icon, click on it and you can test various widths for phones, tablets, monitors, and what not.