CODEWITHSUNDEEP
htmlcss
Oblivion
Oblivion

Reputation: 635

HTML column-count issue

I'm using column-count in order to enable masonry for my image gallery. It works as expected when i set the column-count to 3.

When its 3:

enter image description here

The issue arises when i set it equal to 4. It seems to maintain 3 and just set whitespace as the 4th column to the right.

When its 4:

enter image description here

I'm not sure what the issue could be.

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  height: 100vh;
}

#photos {
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  column-count: 4;
  column-gap: 0;
}

#photos img {
  width: 100% !important;
  height: auto !important;
}
<div id="photos">
  <img src="https://via.placeholder.com/150" alt="">
  <img src="https://via.placeholder.com/150" alt="">
  <img src="https://via.placeholder.com/150" alt="">
  <img src="https://via.placeholder.com/150" alt="">
  <img src="https://via.placeholder.com/150" alt="">
</div>

Upvotes: 0

Views: 51

Answers (1)

Hassen Fadhlaoui
Hassen Fadhlaoui

Reputation: 187

you can't achieve your wish with the column-count bacause you need to know that it works like this numbers are the standing of the images in HTML so you may need to add more the have an img in the fourth column

enter image description here

I suggest to use the flex 

#photos {
    display: flex;
    flex-wrap: wrap;
}

#photos img {
    width: 25%;
}

Hope it helped

Upvotes: 2

Related Questions