CODEWITHSUNDEEP
htmlcss
user2039981
user2039981

Reputation:

CSS row-gap like column-gap?

Using this tutorial, I tried making the same thing, but with gaps between the images. So I simply changed the column-gap property to 3px, but obviously, that only works horizontally. Is there any thing like row-gap or anything so I also can have a 3px gap vertically between the images? Here's the codepen.

column-gap: 3px;
row-gap: 3px /* ??? */

EDIT: How this image grid works is by simply using:

line-height: 0;

and

column-count: <any value>
column-gap: 0;

on the container/parent and with

width: 100% !important;
height: auto !important;

on the images/children.

HTML

<section id="photos">
<img src="http://www.lorempixel.com/394/205/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/246/306/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/356/398/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/388/367/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/316/354/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/348/216/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/342/371/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/327/201/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/310/225/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/210/238/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/255/247/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/334/361/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/399/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/288/215/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/216/227/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/311/200/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/371/266/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/362/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/333/220/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/297/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/377/342/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/306/243/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/303/223/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/384/238/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/396/272/cats" alt="pretty kitty">
</section>

CSS

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   3px;
   -moz-column-count:    5;
   -moz-column-gap:      3px;
   column-count:         5;
   column-gap:           3px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

EDIT 2: I have tried line-height, but it only seems to use half the space and line-height as well as margin-bottom and padding-bottom will leave an extra space at the very bottom of every column, and besides that, you can't really change the color of them, border-bottom would be more ideal for color though, but also, it leaves a space at the end of every column aswell.

Upvotes: 3

Views: 9555

Answers (1)

Popnoodles
Popnoodles

Reputation: 28409

There are no rows. Add a margin to the images.

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 3px;
}

Upvotes: 5

Related Questions