How To Create Equal Height Columns In Modern Web Design

The Problem

Grid Layout is the most popular layout system in today's web design. It helps developers organize and arrange web content in neat layout design. 

However, the problem is that the length of the content in each grid item is not the same. This may disrupt your layout and cause your page to be cluttered.

What Is Equal Height

When you're developing a modern web application, you might need to make grid items have the same height no matter how many content is placed in them.

Equal Height is such a web technology that makes all children elements (columns) of a parent container equal in height.

The Solution

There are tons of equal height solutions out there, the easiest one is to use CSS as follows:

CSS display: table

See the Pen Equal Height Columns using CSS display: table by iqq800 (@iqq800) on CodePen.

CSS Flexbox

See the Pen Equal Height Columns using CSS Flexbox by iqq800 (@iqq800) on CodePen.

The Best JavaScript Solution

In some complex development environments, for example, your users are still using legacy browsers like Internet Explorer, you might need a JavaScript solution to create equal height columns in your cross-platform web project.

Here are the 10 best Vanilla JavaScript and jQuery Plugins to help you create a equal height layout where the height of each column is set to the tallest one in a row. Have fun with it.

Table of contents:

• jQuery Equal Height Plugins
• Vanilla JS Equal Height Plugins

Best jQuery Equal Height Plugins

jQuery Plugin For Responsive Bootstrap Equal Height Columns - ColEqualizer

ColEqualizer is a very small jQuery plugin used to dynamically equalize the height of all child columns of the Bootstrap grid system.

[Demo] [Download]

---

jQuery Plugin To Make Equal Height Columns - jcolumn

jcolumn is an ultra-light jQuery plugin for making a group of columns height equal to the tallest one that works on window resize event.

[Demo] [Download]

---

Minimalist jQuery Responsive Equal Height Grid Layout - Javascript Grids

Javascript Grids is a super simple jQuery plugin for creating a nest & responsive grid layout that all the grid elements have the equal height, based on the tallest element.

[Demo] [Download]

---

Set Sibling Elements To The Same Height - jQuery equal-height.js

An ultra-light (1kb minified) jQuery equal height plugin for modern web layout design that can be used to make all columns equal in height per row.

[Demo] [Download]

---

Equal-height Tile Layout Plugin For jQuery - Tile.js

Tile.js is a tiny, fast and easy-to-use jQuery plugin for generating a neat grid layout with equal-height tiled blocks.

[Demo] [Download]

---

Best Vanilla JS Equal Height Plugins

Creating Responsive Equal Height Blocks with Vanilla JavaScript

A minimalist way to create columns with equal height that works with multiple rows and responsive design. Written in vanilla JavaScript.

[Demo] [Download]

---

Equalize Heights of Containers with Javascript

With a little Javascript and CSS codes, you can easily equalize the heights of any group of Html elements to create a neat web layout. Works well with responsive design.

[Demo] [Download]

---

Responsive Equal Height Plugin With Pure JavaScript – right-height

A lightweight (4kb) and standalone JavaScript library to easily equalize the heights of any group of elements. Supports nested elements.

[Demo] [Download]

---

Responsive Equal Height Columns In Pure JavaScript

A simple, lightweight script that makes all the grid items within a grid row have the same height depending on the tallest one. Works on responsive web layout.

[Demo] [Download]

---

Equal Height Columns In JavaScript – equalizer.js

Just another JavaScript plugin that makes all the columns have the same height depending on the tallest one. Works perfectly with window resize event.

[Demo] [Download]

---

More Resources:

Want more jQuery plugins or JavaScript libraries to create equal height columns on the web & mobile? Check out the jQuery Equal Height and JavaScript Equal Height sections.

See Also:

• 10 Best jQuery/JavaScript Masonry Layout Plugins
• 10 Best JavaScript & CSS Responsive Grid Layouts
• 10 Best Grid Layout Systems In JavaScript And CSS