CSS-image gallery--mysterious whitespace at second row

Question

so I am trying to create a simple image gallery using HTML and CSS, here's my code below

img{
 float:left;
 width: 30%;
 margin: 1.66%;
}

<!DOCTYPE html>
<html>
<head>
 <title>Gallery</title>
 <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>


 <img src="IMG_1.jpg">
 <img src="IMG_2.jpg">
 <img src="IMG_3.jpg">

 <img src="IMG_4.jpg">
 <img src="IMG_5.jpg">
 <img src="IMG_6.jpg">

 <img src="IMG_7.jpg">
 <img src="IMG_8.jpg">
 <img src="IMG_9.jpg">
</body>
</html>

and I should expect to get a 3*3 image grid, but here is what I got

there is HUGE whitespace at the left of the second row. when I inspect it, the blank doesn't belong to any of the images. WHY!

Can you upload the images to imgur and then add them in. It is hard to see with the missing image placeholders. — evilgenious448, Nov 15 '19 at 03:19

score 1 · Answer 1 · answered Nov 15 '19 at 03:30

Try this 100% it will work

.gallery{
    display: flex;
    flex-wrap: wrap;
}
img{
    width: 30%;
    margin: 1.66%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Gallery</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>

    <div class="gallery">
      <img src="https://picsum.photos/536/354">
      <img src="https://picsum.photos/536/354">
      <img src="https://picsum.photos/536/354">

      <img src="https://picsum.photos/536/354">
      <img src="https://picsum.photos/536/354">
      <img src="https://picsum.photos/536/354">

      <img src="https://picsum.photos/536/354">
      <img src="https://picsum.photos/536/354">
      <img src="https://picsum.photos/536/354">
    </div>
  </body>
</html>

score 0 · Answer 2 · answered Nov 15 '19 at 03:32

Try to use flex, rather than float.

Wrap that images inside div:

<div class="img-container">
    <img src="IMG_1.jpg">
    <img src="IMG_2.jpg">
    ...
</div>

And use this style:

.img-container {
    display: flex;
    flex-wrap: wrap;
 }

 img{
    /*float:left;*/
    width: 30%;
    margin: 1.66%;
 }

CSS-image gallery--mysterious whitespace at second row

2 Answers2