Photo-Grid Layout CSS

Question

So I have this photogrid made with CSS and its working fine except I want it to display like this:

1 | 2 | 3
4 | 5 | 6

instead of

1 | 3 | 5
2 | 4 | 6

I messed around with the css for awhile but I couldn't get it right. Here's the code:

HTML:

<section id="photos">
<img src="imgs/logo1.jpg" alt="">
<img src="imgs/logo2.png" alt="">
<img src="imgs/logo3.png" alt="">
<img src="imgs/logo4.jpg" alt="">
</section>

CSS

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

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

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

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Suspected duplicate - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Mar 28 '16 at 08:26
@Paulie_D in your link the answer says "an alternative for it is the css3 columns"; well this post here on where we are now is this **alternative** (as you see on the CSS box) so it's about the same thing but it isn't the same situation (since there it seems to be the jQuery grid); — L777, Mar 28 '16 at 08:33
Since the CSS columns aren't working (obviously) I suspect that flexbox and float rows won't either...that's why I think this is another masonry.js question....it's a **suspected** duplicate....not a **definite** one. We don't know enough to be sure as there isn't enough information provided to confirm. — Paulie_D, Mar 28 '16 at 08:37
Columns are columns, you need rows, so use the normal flow (inline-block, float, flexbox, etc), but don't use columns if you don't want columns (obviously) — Marcos Pérez Gude, Mar 28 '16 at 09:08
Yes...and it's not working...clearly. Hence the javascript and *suspected* duplicate. — Paulie_D, Mar 28 '16 at 10:28
You don't want columns for this, use `flex` as @freestock.tk suggests (or `display: table` if older browser support is needed) — Asons, Mar 28 '16 at 13:22

L777 · Accepted Answer · 2016-03-28T13:14:59.553

My suggestion to have a bigger control of the element's order through CSS is to use flexbox. The relevant flex properties for it are flex-direction and order.

Flex Direction Examples:

.container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    outline: 1px dashed black;
    color: white;
    font-size: 2em;
}

.row {
    -webkit-flex-direction: row; /* Safari 6.1+ */
    flex-direction: row;
    background: tomato;
}

.row-reverse {
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    flex-direction: row-reverse;
    background: gold;
}

.column {
    -webkit-flex-direction: column; /* Safari 6.1+ */
    flex-direction: column;
    background: hotpink;
}

.column-reverse {
    -webkit-flex-direction: column-reverse; /* Safari 6.1+ */
    flex-direction: column-reverse;
  background: purple;
}

.container div {
    padding: 5px;
    outline: 1px solid cyan;  
}

<div class="container row">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container row-reverse">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container column">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

<div class="container column-reverse">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

Flex Order Examples:

.orderA, .orderB, .orderC {
  outline: 1px dashed black;
  display: -webkit-flex; /* Safari */
  display: flex;
  font-size: 2em;
}

.orderA .a {
  -webkit-order: 1;
  order: 1;  
}

.orderA .b {
  -webkit-order: 2;
  order: 2;  
}

.orderA .c {
  -webkit-order: 3;
  order: 3;  
}

.orderA .d {
  -webkit-order: 4;
  order: 4;  
}

.orderA .e {
  -webkit-order: 5;
  order: 5;  
}

.orderA .f {
  -webkit-order: 6;
  order: 6;  
}

.orderB .a {
  -webkit-order: 6;
  order: 6;  
}

.orderB .b {
  -webkit-order: 5;
  order: 5;  
}

.orderB .c {
  -webkit-order: 4;
  order: 4;  
}

.orderB .d {
  -webkit-order: 3;
  order: 3;  
}

.orderB .e {
  -webkit-order: 2;
  order: 2;  
}

.orderB .f {
  -webkit-order: 1;
  order: 1;  
}

.orderC .a {
  -webkit-order: 2;
  order: 2;  
}

.orderC .b {
  -webkit-order: 4;
  order: 4;  
}

.orderC .c {
  -webkit-order: 6;
  order: 6;  
}

.orderC .d {
  -webkit-order: 1;
  order: 1;  
}

.orderC .e {
  -webkit-order: 3;
  order: 3;  
}

.orderC .f {
  -webkit-order: 5;
  order: 5;  
}

.orderA div {
  background: skyblue;
  outline: 1px solid hotpink;
  padding: 5px;
}

.orderB div {
  background: gold;
  outline: 1px solid hotpink;
  padding: 5px;
}

.orderC div {
  background: greenyellow;
  outline: 1px solid hotpink;
  padding: 5px;
}

<div class="orderA">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

<div class="orderB">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

<div class="orderC">
<div class=a>1</div><div class=b>2</div><div class=c>3</div><div class=d>4</div><div class=e>5</div><div class=f>6</div>
</div>

A Flex Grid of Images where flex-direction and order can be easily applied (if needed):

body {
  width: 100%;
  height: 100vh;
  margin: 0;
}

.container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around; /* Safari 6.1+ */    
    justify-content: space-around;
}

.container div {
  -webkit-flex: 0 0 calc(33.3% - 20px); /* Safari 6.1+ */
  -ms-flex: 0 0 calc(33.3% - 20px); /* IE 10 */ 
  flex: 0 0 calc(33.3% - 20px);  
  background: lavender;
  border: 2px solid black;
  box-sizing: border-box;
  margin: 10px;
  font-size: 2em;
  text-align: center;
}

<div class="container">
  <div>1 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>2 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>3 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>4 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>5 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
  <div>6 <img src="http://i.imgur.com/ufh1gnC.png" alt=img></div>
</div>

`-20px` on the example `calc(33.3% - 20px);` means 2 times the margin value (which is `10px`) — L777, Mar 30 '16 at 21:55

score 0 · Answer 2 · answered Mar 28 '16 at 10:12

If you like the Mosaic style, I give you another way to order images by Javascript: "Alway put Image to the shortest columns".

Set Images position is absolute, and Div container is relative.
Use an array to storage the high of every column: var columnsHigh = [0,0,0]
Browse the image list, get one at every step and put it at point has coordinate {x,y}, with y = min(columnsHigh) and x = 100/(minPos(columnsHigh, y)) (minPos will find the shortest column's index in array columsHigh.)
update height of the container and shortest column height by plus the image's height.

Demo Code

$(function(){
 mosaicGrid('.container', 'img');
});

function mosaicGrid(selector,target) {
  var cols = [0,0,0,0];
  var allTarget = $(selector).find(target);
  if (0 === allTarget.length) 
    return;
  allTarget.one('load', function(e){    
      var pos = minPos(cols);
      var x = pos * 100/cols.length;
      var y = cols[pos];
      $(this).css({left: x + "%", top: y + "px", width: Math.floor(100/cols.length)+"%"});      
      cols[pos] = cols[pos] + $(this).height();
      $(selector).height(Math.max.apply(null, cols) );      
      $(this).off(e);
  }).each(function(){
    if(this.complete)
      $(this).trigger('load');
  });
}
function minPos(arr) {
  var min = Math.min.apply(null, arr);
  for(var i = 0; i < arr.length; i++) {
    if (min === arr[i])
      return i;
  }
}

.container {
  position: relative;
  width: 100%;
  height: 50px;
}

img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="http://www.warrenphotographic.co.uk/photography/cats/30081.jpg" alt="">
  <img src="http://iwallhd.com/stock/yellow-labrador-retriever-puppy-white-background.jpg" alt="">
  <img src="http://i.imgur.com/nZlaeSH.jpg" alt="">
  <img src="http://www.cuter.cn/wp-content/uploads/2013/08/1375453731.jpg" alt="">
  <img src="https://puppydogweb.com/wp-content/uploads/2015/05/puppy-wallpaper-dancing-little-dogs-.jpg" alt="">
  <img src="http://www.petsworld.in/blog/wp-content/uploads/2015/03/How-To-Make-Your-Puppy-Gain-Weight.jpg" alt="">
  <img src="http://www.dogster.com/wp-content/uploads/2015/05/dalmatian-puppies-04.jpg" alt="">
  <img src="http://indiabright.com/wp-content/uploads/2015/10/Gallery-of-Dogs-Balancing-Cupcakes-539445.jpg" alt="">
  <img src="https://s-media-cache-ak0.pinimg.com/236x/63/60/39/6360396daf54afd024d181b6567a8c28.jpg" alt="">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr7jvGrFyqNOWgqfMD5t5zgOOf66pfGLVM8Jv0Uj16gfufLQTF" alt="">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR24wc_yoDK_i3nm6o6IV77ggd9KzBiBR9wwBlU3-bIgIEz9bMT" alt="">
  <img src="http://justcuteanimals.com/wp-content/uploads/2015/01/puppy-love-cute-yellow-lab-puppies-pups-dogs-animals-pictures-pics.jpg" alt="">
  <img src="http://omgcutethings.com/wp-content/uploads/2014/08/puppy-love-005-08092014.jpg" alt="">
  <img src="http://www.dallasvoice.com/wp-content/uploads/2015/03/puppy-2.jpg" alt="">
  <img src="http://www.perseyspetgrooming.com/images/puppy.png" alt="">
</div>

you could add a function `window.addEventListener('resize', ... ); ` to recalculate the sizes/positions on window resize event; — L777, Mar 28 '16 at 13:26
or `$(window).resize(function() { ...` since you're already using jQuery. — L777, Mar 28 '16 at 14:45
I have one resize handler in my real app,I had think it is basic so I dont put it in here :D Thanks for advanced @freestock.tk — Davuz, Mar 29 '16 at 01:32

Photo-Grid Layout CSS

2 Answers2