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


Author: guoyunhe
Views Total: 15,792 views
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;

 

See also  Pure CSS Image Slider With Thumbnail Navigation

Leave a Reply

Your email address will not be published. Required fields are marked *