'Order of items with column-count property

I'm trying to create a masonry-type layout with my images using CSS only. I followed this guide and it works well.

HTML:

<div class="grid">  
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
    <img src="4.jpg">
    <img src="5.jpg">
    <img src="6.jpg">
    <img src="7.jpg">
    <img src="8.jpg">
</div>

CSS:

.grid {
  line-height: 0 ;

  -webkit-column-count: 4 ;
  -webkit-column-gap:   10px ;
  -moz-column-count:    4 ;
  -moz-column-gap:      10px ;
  column-count:         4 ;
  column-gap:           10px ;

  margin: 20px;
}

.grid img {
  width: 100% ;
  height: auto ;
  margin-bottom: 10px;
}

It looks like this: Seamless grid layout

However, the images appears in this order:

1    3    5    7
2    4    6    8

I would like to have it like this:

1    2    3    4
5    6    7    8

How would I solve this? I would prefer a CSS only solution, but I'm open to Javascript and jQuery methods as well. Ideally I would like a row-count property, but that doesn't exist.

htmlcss


Solution 1:[1]

Use display:flex and flex-wrap: wrap on .grid. On images use width:25%; and flex: 1 0 25% if you want 4 in a row.

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: auto;
}
img {
  width: 25%;
  height: auto;
  flex: 0 1 25%;
}
<div class='grid'>
  <img src='https://placem.at/people?w=160&h=90&random=1&txt=1'>
  <img src='https://placem.at/things?w=160&h=90&random=1&txt=2'>
  <img src='https://placem.at/places?w=160&h=90&random=1&txt=3'>
  <img src='https://placem.at/things?w=160&h=90&random=1&txt=4'>
  <img src='https://placem.at/people?w=160&h=90&random=1&txt=5'>
  <img src='https://placem.at/places?w=160&h=90&random=1&txt=6'>
  <img src='https://placem.at/things?w=160&h=90&random=1&txt=7'>
  <img src='https://placem.at/people?w=160&h=90&random=1&txt=8'>
</div>

Solution 2:[2]

What if you just change the order of images at your html file?

<div class="grid">  
    <img src="1.jpg">
    <img src="5.jpg">
    <img src="2.jpg">
    <img src="6.jpg">
    <img src="3.jpg">
    <img src="7.jpg">
    <img src="4.jpg">
    <img src="8.jpg">
</div>

Solution 3:[3]

Either, change the order of the pictures in HTML as @FradistaFicko suggested or use flexbox and manually set the order of the pictures, remembering to also set fixed height and width on the container.

fiddle here: https://jsfiddle.net/jwhwn62v/1/

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex 1 1;
  height: 100vw;
  width:100vw;

}

.grid img {
  width: 33.33% ;
  height: auto ;
  margin: 5px;
}

.grid img:nth-child(3n+1) {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.grid img:nth-child(3n+2) {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
.grid img:nth-child(3n+3) {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;

}

Solution 4:[4]

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;

  }
}

**Please check this link:-http://w3bits.com/css-masonry/ **

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 FradistaFicko
Solution 3 Varin
Solution 4 Razia sultana

Related Questions