Order of items with column-count property

Question

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:

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.

Answer 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>