Grab and learn
Code editor Setup VScode
Top Navigation Sticky Navbar Hamburger Collapse Columns 2D transforms 3D transforms Normal card Flip card Scrollbar Progressbar Skillbar Alert Jumbotron Forms Popover Tooltip Background overlay Breadcrumbs Toast Radio buttons Text input Range sliders Dropdown Pagination Modals Color picker Icons Tables
Curtain menu Mega menu Toggle sidebar Collapsed sidepanel Full screen navigation Hide navbar on scroll Shrink navbar on scroll Page animation Image magnifier
Hover animations Parallax Scroll animation Scroll down animated icon Auto typer Carousel Animated icons Particles Smooth scroll Text animations Cube animations
Online website
Domain name Hosting SEO structure Crawling Indexing Canonical links Sitemap Robots.txt Google Search Console Google Analytics
Beginners Bootstrap Responsive websites Sass CSS grid CSS flexbox
Vanilla JQuery Page animation Async Javascript AJAX Node.js React JS Express


With columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. If you’re already working with a fluid layout, the columns will reflow automatically. With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully.

Professional examples

The below stated examples are commonly applied in online website designs. The code is available for you and offers you the possibility to edit it to your own creation!

5 columns bootstrap

Effect: basic

See the Pen 5 columns bootstrap by Carmen (@guagazan) on CodePen.

CSS Columns bootstrap

Effect: basic

See the Pen CSS Columns by Kevin (@kevinpowell) on CodePen.

Equal Height and Width Columns using Flexbox (without bootstrap)

Effect: basic

See the Pen Equal Height and Width Columns using Flexbox by Karen Menezes (@imohkay) on CodePen.


Need to learn more about creating columns? We recommend you to checkout w3schools.

Learn how to make columns

The video's below are carefully selected and give you a clear explanation of how you can build this module yourself.

CSS Columns - Kevin Powell

CSS Columns are awesome! You can easily create multi-column, repsonsive layouts WITHOUT media queries. I don't see them used a lot these days, and there is no excuse considering how good browser support is (even IE fully supports it, I mean, what else can we ask for!).

The two main properties are column-count and column-width, but I also take a look at column-rule and column-gap, as well as the columns shorthand.

CSS Multi-Columns - Awesome Newspaper Style Layouts (NO Flexbox or Grid) - DesignCourse

Today, I'm going to show you how to create layouts for content heavy pages using CSS multi-columns. This technique doesn't utilize flexbox or the grid, but instead, it uses a series of properties that allows you to easily structure columns and rows for this type of layout.

Copyright © 2020