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

Category: CSS & CSS3 , Gallery , Layout | January 23, 2017
Author: guoyunhe
Views Total: 5,627
Official Page: Go to website
Last Update: January 23, 2017
License: MIT

Preview:

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

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;

 

You Might Be Interested In:


One thought on “Responsive Justified Photo Grid Layout With Pure CSS – flexbin.css

Leave a Reply