w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Layouts
Best ideas to build responsive equal height columns CSS

5 Best ideas to build responsive equal height columns CSS

W3TWEAKS by W3TWEAKS
February 9, 2021
in Layouts
0

You might also like

JavaScript Sticky Sections

9 JavaScript Sticky Sections

September 23, 2021
0
CSS Sticky Sections

16 CSS Sticky Sections

September 23, 2021
0

Collection of different ideas to build the equal height columns css. Source code is available on each demo.

Author

  • Chris Coyier
  • February 18, 2013

Link

merging-flexbox-syntaxesDownload

Made with

  • HTML / CSS

About the Code

Merging Flexbox Syntaxes

Old and new, living together.

More info: Link

Dependency: –

Responsive: Yes

Author

  • Bryan Willis
  • August 20, 2016

Link

flexi-bootstrap-thumbnail-cards-cardsDownload

Made with

  • HTML / CSS

About the Code

Flexi Bootstrap ( Thumbnail Cards Cards )

Example using Twitter Bootstrap and flexbox and a few others. Flexbox works on all devices except for IE <= 9

More info: Link

Dependency: bootstrap.min.css, animate.min.css, example.css, jquery.min.js, bootstrap.min.js

Responsive: Yes

Author

  • Craig Anthony
  • October 21, 2016

Link

Download

Made with

  • HTML / Less

About the Code

Flexbox Card Grid equal height columns CSS

Quick prototype of equal height cards using flexbox grid layout. Also demonstrates the use of CSS aspect ratios (check out the images) and CSS filters.

More info: Link

Dependency: –

Responsive: Yes

Author

  • Karen Menezes
  • October 15, 2013

Link

Download

Made with

  • HTML / SCSS

About the Code

Equal Height and Width Columns using Flexbox

The confounding equal height columns CSS issue is easily resolved with flexbox. Here are a few demos that use the tremendous power of flexbox to do so.

More info: Link

Dependency: –

Responsive: Yes

Author

  • Pat McKenna
  • January 8, 2016

Link

responsive-equal-height-images-with-cssDownload

Made with

  • HTML / CSS

About the Code

Responsive equal height images with CSS

Wanna put a bunch of images in a row, and make them all the same height? Well, you can. Flexbox to the rescue!

More info: Link

Dependency: –

Responsive: Yes

Tags: CSSequal height columnsame height
Previous Post

12 Best ideas to build CSS Holy Grail layouts

Next Post

13 Cool Simple CSS Grid layout examples

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

JavaScript Sticky Sections

9 JavaScript Sticky Sections

by W3TWEAKS
September 23, 2021
0
0

This is a collection of JavaScript sticky sections with the demo. JavaScript sticky sections allow you to create a scrollable...

CSS Sticky Sections

16 CSS Sticky Sections

by W3TWEAKS
September 23, 2021
0
0

This article includes a collection of demos that demonstrate the use of CSS sticky sections. The demos include text sticky...

Free CSS Masonry Grid Layouts

9 Free CSS Masonry Grid Layouts

by W3TWEAKS
May 4, 2021
0
0

This is a collection of free CSS Masonry grids. I have found around the Codepen! This Masonry grid allows you...

Cool Simple CSS Grid layout examples

13 Cool Simple CSS Grid layout examples

by W3TWEAKS
April 29, 2021
0
0

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for...

Next Post
Cool Simple CSS Grid layout examples

13 Cool Simple CSS Grid layout examples

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube