JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<section id="gallery">
    <h2>Gallery</h2>
    <div id="img-container">
        <img src="https://i.stack.imgur.com/Qv0iL.png" alt="">
        <img src="https://i.stack.imgur.com/Qv0iL.png" alt="">
        <img src="https://i.stack.imgur.com/Qv0iL.png" alt="">
        <img src="https://i.stack.imgur.com/Qv0iL.png" alt="">
    </div>
</section>

CSS

#gallery #img-container {
    padding:10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

#gallery img {
    width: 100%;
    object-fit: cover;
}

#gallery #img-container img:first-child {
    grid-column: 1 / 4;
}