1

I want to display several images (or even other content) with fixed width and dynamic height together with a specific vertical and horizontal margin in a grid.

How to achieve a certain ordering without ordering the items in HTML markup? Currently, I read the number in ascending order from top to bottom, column after column. I want to read the numbers from left to right, row after row.

.grid {
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 0;
    -moz-column-count: 3;
    -moz-column-gap: 0;
    column-count: 3;
    column-gap: 0;
}

.grid img {
    width: 100% !important;
    height: auto !important;
}
<p>Given markup order</p>
<div class="grid">
    <img src="http://placehold.it/300x300/aabbcc?text=1">
    <img src="http://placehold.it/300x341/aaccbb?text=2">
    <img src="http://placehold.it/300x254/bbaacc?text=3">
    <img src="http://placehold.it/300x384/bbccaa?text=4">
    <img src="http://placehold.it/300x256/ccaabb?text=5">
    <img src="http://placehold.it/300x174/ccbbaa?text=6">
    <img src="http://placehold.it/300x413/ddeeff?text=7">
    <img src="http://placehold.it/300x518/ddffee?text=8">
    <img src="http://placehold.it/300x324/eeddff?text=9">
    <img src="http://placehold.it/300x192/eeffdd?text=10">
    <img src="http://placehold.it/300x195/ffddee?text=11">
    <img src="http://placehold.it/300x481/ffeedd?text=12">
</div>

<p>Desired display order with markup from above</p>
<div class="grid">
    <img src="http://placehold.it/300x300/aabbcc?text=1">
    <img src="http://placehold.it/300x341/aaccbb?text=4">
    <img src="http://placehold.it/300x254/bbaacc?text=7">
    <img src="http://placehold.it/300x384/bbccaa?text=10">
    <img src="http://placehold.it/300x256/ccaabb?text=2">
    <img src="http://placehold.it/300x174/ccbbaa?text=5">
    <img src="http://placehold.it/300x413/ddeeff?text=8">
    <img src="http://placehold.it/300x518/ddffee?text=11">
    <img src="http://placehold.it/300x324/eeddff?text=3">
    <img src="http://placehold.it/300x192/eeffdd?text=6">
    <img src="http://placehold.it/300x195/ffddee?text=9">
    <img src="http://placehold.it/300x481/ffeedd?text=12">
</div>
Jan
  • 1,231
  • 2
  • 13
  • 19
  • I dont know if this will work with variable height. But I guess `columns` can only align vertical and cant align horizontal. So I think the answer would be something like `float: left` and `display: inline-block` on the images. – Thaillie Sep 16 '15 at 22:28
  • I already tried a solution based on floats. But I get undesired gaps in my grid. Would be great if you have a solution without gaps. – Jan Sep 16 '15 at 22:38
  • 3
    For as far as I know there is no solution for this. Possible duplicate: http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights – Thaillie Sep 16 '15 at 22:41

0 Answers0