Achieving a Photo Grid Layout with CSS

Question

Achieving a Photo Grid Layout with CSS

Looking for help with my CSS photogrid - it's close to what I want, but not quite there. Here's the layout I'm aiming for:

1 | 2 | 3
4 | 5 | 6

But currently, it displays like this:

1 | 3 | 5
2 | 4 | 6

I've tried tweaking the CSS but couldn't achieve the desired layout. Below is the code I'm using:

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;
  }
}

html css

Answer 1

Answer №1

One effective way to gain more control over the element's order using CSS is by utilizing the flexbox feature. Key flex properties for achieving this include flex-direction and order.

Illustrations of Flex Direction:

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

Examples of Flex Order:

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

An Attractive Grid of Images with Flexible Layout where flex-direction and order features can be effortlessly incorporated (when necessary):

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>

Answer 2

One effective way to gain more control over the element's order using CSS is by utilizing the flexbox feature. Key flex properties for achieving this include flex-direction and order.

Illustrations of Flex Direction:

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

Examples of Flex Order:

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

An Attractive Grid of Images with Flexible Layout where flex-direction and order features can be effortlessly incorporated (when necessary):

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>

Answer 3

Answer №2

For those who appreciate the Mosaic style, here's an alternative method to arrange images using Javascript: "Always place the Image in the shortest column".

Position Images absolutely, and make the Div container relative.
Utilize an array to store the height of each column: var columnsHigh = [0,0,0]
Iterate through the image list, selecting one at a time and placing it at coordinates {x,y}, with y = min(columnsHigh) and x = 100/(minPos(columnsHigh, y)) (minPos will identify the index of the shortest column in the columsHigh array.)
Adjust the height of the container and the shortest column by adding the height of the image.

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>

Answer 4

For those who appreciate the Mosaic style, here's an alternative method to arrange images using Javascript: "Always place the Image in the shortest column".

Position Images absolutely, and make the Div container relative.
Utilize an array to store the height of each column: var columnsHigh = [0,0,0]
Iterate through the image list, selecting one at a time and placing it at coordinates {x,y}, with y = min(columnsHigh) and x = 100/(minPos(columnsHigh, y)) (minPos will identify the index of the shortest column in the columsHigh array.)
Adjust the height of the container and the shortest column by adding the height of the image.

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>

Achieving a Photo Grid Layout with CSS

Answer №1

Answer №2

Similar questions

Changing the appearance of a shadow root element using CSS styling

By utilizing the window.history.back() function, it takes me four clicks to navigate back one page

Error in viewpoint/transformation transition on Microsoft Edge

Tips for substituting @media (max-width) with Stylish or Greasemonkey?

What is the best way to combine multiple classes when declaring them in CSS?

Converting HTML to CSV using PHP

How can I align a mapped button to appear on the opposite side of the data using Tailwind CSS?

Steps for retrieving the currently selected text inside a scrolled DIV

"Enhance Your Webpage with Textual Links that Display Background

Using SQL to Insert Values into Select/Option

Tips for utilizing innerHeight for a div during both window loading and resizing tasks?

If the condition is based on the category in category.php and single.php

How to automatically switch to the next tab in Bootstrap using JQuery when the video finishes

Tips for creating multiple functions within a single JavaScript function

``Look at that cool feature - a stationary header and footer that stay in place

How can I eliminate the empty spaces around a bar chart in Kendo UI?

Having trouble triggering the onclick event on a dynamically created table using JavaScript

Element sticking on scroll down and sticking on scroll up movements

Having trouble with setting CSS style in <p> tags within Codeigniter framework

How can we stop the anchor jump caused by a third-party script?