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 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 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 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 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
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
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
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
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
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
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 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 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
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™ 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
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.