70+ Awesome JavaScript Layout Effects Collection (Projects and Codes) in 2025

Dynamic Newspaper w/CSS Grid

Automatically loads latest stories on refresh. Layout is done with CSS Grid. Built with HTML5, CSS3, JavaScript, jQuery and the News API.

fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

justified-layout

Pass in box sizes and get back sizes and coordinates for a justified layout

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.

scrollable-tabs-bootstrap-5

A simple plugin to create scrollable tabs with Bootstrap 5.

gridstack.js

Build interactive dashboards in minutes.

js-dynamic-image

JavaScript library to enable dynamic change of image source based on element width change.

fitter-happier-text

Fitter Happier Text is a lightweight Javascript helps you create responsive, big, and fully flexible headings on your web page. It will automatically and dynamically resize font size for responsive web layout to make your text flexible. When the window’s size changed, the headings will be resized as big as possible to fit within its parent container.

FluidFont

Responsive font made easy with JavaScript. No jQuery required.

memeGenerator

Vanilla JS, CSS Grid, Canvas, Mobile First

GridTableJS

GridTableJS is a JavaScript library to dynamically generate complex HTML tables using pure JavaScript.

awesome-grid

This is the pure JavaScript version of the jquery Awesome Grid plugin which helps you dynamically render a responsive, customizable, mobile-friendly, Pinterest-like grid layout from a regular HTML list.

pkmx

pkmx is a tiny, flexible, dependency-free JavaScript library used for creating a compact cascading grid layout without any space between cells.

same-elements-height

A simple vanilla javascript plugin to set same height for all html elements with css3 style selector.

BrickCols.js

Cascading grid layout (like masonry or brick wall) without absolute positioning. You don't need to use any JS code to set stylesheet properties. Pure and tiny JavaScript only. Light version = 1.56 KB, minified full version = 2.66 KB. Bloki, vylozhennye v vide kirpichnoi kladki. Vse stilisticheskie svoistva opisyvaiutsia tol'ko v CSS, JS skript otvecha...

gridfolio

Gridfolio is a simple and easy-to-use JavaScript library for generating a Flickr-style justified, responsive grid layout for portfolio webpages.

circosJS

d3 library to build circular graphs

PureJS-SplitterBar

Splitter bar non-oop with no jQuery

responsive_waterfall

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

hy-drawer

A touch-enabled drawer component for the modern web.

natural-gallery-js

A lazy load, infinite scroll and natural layout list gallery

Draggable-Slider

Creating a draggable slider with vanilla JavaScript

split

Unopinionated utilities for resizeable split views

EasyGrid

EasyGrid - VanillaJS Responsive Grid

masonry-rows

A Custom Element that delivers masonry grid layout to most common browsers.

fixed-table-js

Fixed Table Layout JavaScript Library

gallery

Light, responsive, and performant JavaScript gallery

responsive-auto-height

JavaScript library to equalize elements's height

gridify

Gridify is a small vanilla JavaScript plugin used for generating a Pinterest-inspired responsive fluid grid layout (a.k.a Masonry Layout) from a group of items with different width & height.

json2bootgrid

Convert json to awesome bootstrap grid