Float item in list

Question

I have problem, I don't know how to solve, it's difficult to explain but I will try, there is also picture to demonstrate.

I've problem with ordering list, when next row of li item goes on second row there is a lot of space between above row and under row, I would to be without spacing.

https://jsfiddle.net/52suh3pt/

• I've tried to solve with float:left but it's working only for one side.

Look this picture, left is correctly and that I want, right is currently.

HTML:

<div>
<ul>
<li><img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg" alt=""></li>
<li><img src="https://image.freepik.com/free-vector/blue-background_1344-24.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
</ul>

</div>

CSS:

div{
  width:835px;
}
li{
  display:inline-block;
  list-style:none;
  width:262px;
}
img{
  width:100%;
}

Answer 1

This is relatively easy to achieve with Masonry.

Masonry does not requires jQuery, it works as a standalone library. The best part is that you can initialize it with HTML. The minifeid library size is about 24Kb. The number is reduced to slightly under 8kb if you use Gzip compression

The steps are simple.

1. Load the library using

   <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js></script>
   

2. Find the grid wrapper div and use it to initialize the masonry or in my example.

   <div class="grid" data-masonry='{ "itemSelector": ".item"}'>
   

3. Add media queries to make items responsive based on your personal preference.

Working responsive example:

.grid {
  width: 100%;
  margin: 1em auto;
  text-align: center;
}

.item img {
  display: block;
  width: 100%;
}

.item {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 3px;
}


/* Media Queries */

@media (min-width: 0px) {
  .item {
    width: 99%;
  }
}

@media (min-width: 500px) {
  .item {
    width: 49%
  }
}

@media (min-width: 1000px) {
  .item {
    width: 32.33%;
  }
}

@media (min-width: 2160px) {
  .item {
    width: 24%
  }
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>


<div class="grid" data-masonry='{ "itemSelector": ".item"}'>

  <div class="item">
    <img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg">
  </div>

  <div class="item">
    <img src="https://image.freepik.com/free-vector/blue-background_1344-24.jpg">
  </div>

  <div class="item">
    <img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg">
  </div>

  <div class="item">
    <img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg">
  </div>

  <div class="item">
    <img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg">
  </div>

  <div class="item">
    <img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg">
  </div>

  <div class="item">
    <img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg">
  </div>

  <div class="item">
    <img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg">
  </div>

</div>

This can be further improved by using the imagesLoaded library to make sure masonry doesn't trigger until all the photos have fully loaded. This helps prevent broken layout. However, I won't go into that as that's beyond the scope of this question.

Answer 2

What about this?

div {
  width: 835px;
}

.col {
  width: 30%; 
  display: inline-block;
  vertical-align: top;
}

li {
  display: inline-block;
  list-style: none;
}


img {
  width: 100%;
}

<div>
  <div class="col">
    <li><img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg" alt=""></li>
    <li><img src="https://image.freepik.com/free-vector/blue-background_1344-24.jpg" alt=""></li>
    <li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt="">
    </li>
  </div>
  <div class="col">
    <li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
    <li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
    <li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
  </div>

  <div class="col">
    <li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
    <li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
  </div>

</div>