Search code examples
htmlcsscss-grid

Image inside a cell container of a grid is not square

Like the title says. When I have an image inside a cell container of a grid container, the images are not square. If I have the images be the grid cells straight, they are.

Code:

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%;
}

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

Code: https://jsfiddle.net/gnes_/e7mauztL/

The image itself gets squared:

Squared Image

But the div.item containing the image doesn't. It has a bigger height, thus leaving some empty space at the bottom:

Not Squared Container

Why does this happen? If I don't use the container class and just put the images straight away it works fine.

Solution

  • Adding the display:block property for the images inside .item solves the problem. The problem has got something to do with the nature of img tags being inline blocks.