Responsive Justified Photo Grid Layout With Pure CSS – flexbin.css

Preview:

Description:

flexbin.css is a lightweight, flexible CSS library which lets you create responsive, neat, justified grid layout for showcasing your photos as you seen on Google Image Search and Flickr. Heavily based on CSS3 flexbox and fully customizable via SCSS.

How to use it:

Just place the style sheet flexbin.css in the header of the document and you’re ready to go.

<link href="flexbin.css" rel="stylesheet">

The HTML structure to create a responsive, justified photo grid with margins.

<div class="flexbin flexbin-margin">
  <a href="#">
    <img src="1.jpg" />
  </a>
  <a href="#">
    <img src="2.jpg" />
  </a>
  <a href="#">
    <img src="3.jpg" />
  </a>
  ...
</div>

Customize the grid layout in the flexbin.scss as shown below:

// Default variables that can be overrided
$flexbin-row-height: 300px !default;
$flexbin-space: 5px !default;
$flexbin-tablet-max: 980px !default;
$flexbin-row-height-tablet: 150px !default;
$flexbin-space-tablet: $flexbin-space !default;
$flexbin-phone-max: 400px !default;
$flexbin-row-height-phone: 100px !default;
$flexbin-space-phone: $flexbin-space !default;