Top 10 JavaScript & CSS Responsive Grid Layouts Of 2017

Here is a constantly updated list of the 10 best JavaScript and CSS based responsive grid layouts we published on CSSScript.com. I hope you like it and don’t forget to spread the world.

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

flexbin.css

Demo Download

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.


9. Lightweight Masonry-like Grid Layout Library – Bricklayer

Bricklayer

Demo Download

Bricklayer is a JavaScript library for generating a responsive, dynamic, Masonry- and Pinterest-like cascading grid layout for your web project.


8. Minimalist Grid Layout With Pure JavaScript – minigrid

minigrid

Demo Download

minigrid is a standalone JavaScript library used to generate a responsive, flexible, customizable grid layout for your next web design. Without the need of any 3rd dependencies like jQuery, etc.


7. Pinterest Style Responsive Dynamic Grid System with Pure JavaScript – colm.js

colm.js

Demo Download

colm.js is a lightweight & standalone JavaScript library that dynamically arrange a collection of elements into a responsive grid layout similar to Pinterest or Masonry.


6. Pure CSS Responsive Triangle/Diamond Grid Layout

Pure CSS Responsive Triangle Diamond Grid Layout

Demo Download

A creative and fully responsive triangle/diamond grid layout using CSS3 transitions, transforms and media queries.


5. Dynamic Responsive Pinterest Style Columns Layout with Pure CSS

Pure CSS Columns Layout Demo

Demo Download

Just another pure CSS implementation of Pinterest style responsive grid layout that automatically & dynamically adjusts the number of grid columns based on screen size.


4. Simple Dynamic Grid Layout with CSS & CSS3

Simple Dynamic Grid Layout with CSS & CSS3

Demo Download

A simple, dynamic, fluid and fully responsive Pinterest-style grid layout with sleek hover effects based on CSS and CSS3 transitions & transforms. No any Javascript required. Great for portfolio websites that work nicely both on desktop and mobile devices.


3. Create A 3D Hexagon Grid Layout with CSS3

Create A 3D Hexagon Grid Layout with CSS3

Demo Download

A 3D hexagon(honeycomb) grid layout with cool hover effects, built on top of CSS3 transitions and transforms.


2. Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

Demo Download

A pure JavaScript solution used to create responsive, fluid waterfall grid layout as you seen on Pinterest.com.


1. Animated Image Grid with CSS3 Based Hover Caption Effects – InContent

Animated Image Grid with CSS3 Based Hover Caption Effects - InContent

Demo Download

InContent is a pure CSS grid layout built with LESS/SASS for creating a responsive & animated image grid gallery that comes with lots of  CSS3 based image caption hover effects like rotate, flip, slide, etc. It currently works perfectly on modern browsers that supports CSS3 transition and transform properties.


Bonus! Recommended Grid Layouts:

Lightweight Masonry Layout Library – Macy.js

macy.js

Demo Download

Macy.js is a lightweight, standalone JavaScript library for creating a Masonry- and Pinterest-like grid layout that displays images in dynamic, responsive vertical columns.


Responsive, Draggable, Filterable Grid Layout – muuri

muuri

Demo Download

muuri is a versatile JavaScript library which helps you create responsive, draggable, filterable, searchable grid layout with smooth animations based on Velocity.js.


Tiny 12-column Flexbox Grid – ragrid.css

ragrid

Demo Download

The ragrid.css provides an easy and convenient way to create a responsive, flexbox-based grid layout for your modern web project. Fully customizable via attributes instead of CSS classes.


Simplest Responsive CSS Grid System – Fukol

fukol

Demo Download

Fukol™ is a tiny (less than 1kb), extendable, fully responsive, Flexbox based, progressive enhancement CSS grid responsive for modern web design.


A Simple Responsive Grid For Web Developers – Gridfolio

Gridfolio

Demo Download

Leps Slider is a simple-to-use JavaScript slideshow plugin for creating a responsive, fullscreen, carousel-style, fully configurable content slider that supports all CSS3 animations.