0

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.

Glauber Néspoli
  • 2,582
  • 2
  • 15
  • 17

3 Answers3

2

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.

EHM
  • 877
  • 1
  • 7
  • 28
0

Please add display:flex; to item class.

 .item {display:flex;}


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;
 display: flex;
}

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

.item:hover,
img:hover {
 opacity: 0.6;
 cursor: pointer;
}
<!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">
   <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>
  </div>
 </body>
</html>
-1

I don't know thee reason but if you modify your item class like

 .item {
    display: contents;
    border: 1px solid black;
}

Then your Images will be in square shape. https://codepen.io/amit_duhan/pen/LYNWaJP

Amit Kumar
  • 21
  • 3