Image grid layout with css example

We were developing a mobile application with different image grid layouts. Layouts needed to be responsive, as the application should look good on all mobile devices including mobile phones and smaller and bigger pads.

The following CSS example shows the 1+3 image gallery layout (one big image with three smaller in the sidebar). The grid should support all image sizes and look good on all devices.

In this example, we will build a 3+1 grid with one bigger image in the center and three smaller ones in the right sidebar. An additional feature will be a half-transparent overlay with the total number of images in the gallery and a link to the gallery.

In our mobile app we were using Ionic framework. The framework had some styles built-in like “row” and “col”. For the simplicity of this tutorial we will be writing CSS and HTML code from scratch.

Start by building one row with 100% flex width. This will ensure the responsiveness of the grid. Then add two columns: one the size of 75% and another one to fill in the rest. Play with this 75% ratio in order to achieve a perfect result. Some images may be of other height/width ratios than the one we have used in the example. You would need to adjust the col-75 flex width accordingly.

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    width: 100%;
}
.col-75 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -moz-box-flex: 0;
    -moz-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75% !important; //dynamic value
    max-width: 75%;
}
.col {
  display: block;
  padding: 5px;
  width: 100%; 
}

HTML code to build the grid:

<div class="gallery">
  <div class="row">
    <div class="col col-75">
      <!-- Big image here -->
    </div>
    <div class="col">
      <div class="row">
        <div class="first-image">
          <!-- First small image -->
        </div>
      </div>
      <div class="row ">
        <div class="mid-image">
          <!-- Second small image -->
        </div>
      </div>
      <div class="row">
        <div class="last-image">
          <!-- Third small image -->
        </div>
      </div>
    </div>
  </div>
</div>

The last thing to do here is to add a darker transparent image overlay with the information about how many images there are in the gallery.

We do it by adding another div under the last small image:

<div class="half-transparent images-info">
  <span>(16)</span>
</div>

Css code for the overlay:

.half-transparent {
    background-color:rgba(0,0,0,0.5);
}
.images-info {
    color: #ffffff;
    overflow: hidden;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align:center;
}
.images-info span {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    overflow: hidden;
    color: #ddd;
    font-size:30px;
}

It can be difficult sometimes to position the overlay exactly over the image. We did it by making its position absolute and giving it a 100% width and height.

The whole gallery should have a relative position and full 100% width. This is to ensure the right positioning of the elements inside the main gallery tag.

The working example can be found at https://jsfiddle.net/wfoqafq4/5/