JSFiddle - React, Tailwind, and code Playground

by gnes_

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Gallery</title>
</head>

<body>
    <div class="container">
        <!-- Not square!!!!! Small space at the bottom of each container. Why? -->
        <div class="item"><img src="https://picsum.photos/300?random=1" alt="Image 1"></div>
        <div class="item"><img src="https://picsum.photos/300?random=2" alt="Image 2"></div>
        <div class="item"><img src="https://picsum.photos/300?random=3" alt="Image 3"></div>
        <div class="item"><img src="https://picsum.photos/300?random=4" alt="Image 4"></div>
        <div class="item"><img src="https://picsum.photos/300?random=5" alt="Image 5"></div>
        <div class="item"><img src="https://picsum.photos/300?random=6" alt="Image 6"></div>
        <div class="item"><img src="https://picsum.photos/300?random=7" alt="Image 7"></div>
        <div class="item"><img src="https://picsum.photos/300?random=8" alt="Image 8"></div>

        <!-- <img src="https://picsum.photos/300?random=1" alt="">
        <img src="https://picsum.photos/300?random=2" alt="">
        <img src="https://picsum.photos/300?random=3" alt="">
        <img src="https://picsum.photos/300?random=4" alt="">
        <img src="https://picsum.photos/300?random=5" alt="">
        <img src="https://picsum.photos/300?random=6" alt="">
        <img src="https://picsum.photos/300?random=7" alt="">
        <img src="https://picsum.photos/300?random=8" alt=""> -->
    </div>

</body>

</html>

CSS

body {
    background-color: black;
    margin: 3vw 2vw;
}

.container {
    display: grid;
    padding: 2px;
    gap: 2px;
    background-color: white;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.item {
    border: 1px solid black;
}

.item img,
img {
    width: 100%;
}

img {
  display: inline-block;
}

.item:hover,
img:hover {
    opacity: 0.6;
    cursor: pointer;
}