Multi-Column Layout In HTML – Insanely Simple Examples

Welcome to a quick tutorial on how to create a multi-column layout in HTML and CSS. Once upon a time in the Dark Ages of the Internet, we need to use all sorts of CSS hacks and crazy tables to create column layouts. Not anymore. It is ridiculously simple with modern CSS.

To create a two-column layout in HTML and CSS:

  1. Create a nested <div> container in HTML – <div class="cols"> <div>One</div> <div>Two</div> </div>
  2. Set the container to flexbox display – .cols { display: flex; width: 100%; }
  3. Lastly, allow the columns to expand themselves – .cols div { flex-grow: 1; }

Yes, that’s all. If you need more columns, just insert more <div> inside the container. But just how do we set different column widths? Add responsive mobile-friendly support? Read on for more examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Column Layout Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

COLUMN LAYOUT

All right, let us now get into the column layout examples.

 

1) TWO COLUMNS LAYOUT

1-two-col.html
 <style>
/* (A) FLEXIBLE CONTAINER */
.cols {
  display: flex;
  width: 100%;
}
 
/* (B) EQUAL COLUMNS */
.cols div {
  flex-grow: 1;
}
 
/* (C) COSMETICS - NOT IMPORTANT */
.cols div {
  background: LightCyan;
  border: 1px solid Blue;
  padding: 10px;
}
</style>
 
<div class="cols">
  <div>First</div>
  <div>Second</div>
</div>
First
Second

This is the “full version” of the introduction snippet, and it is as simple as it gets – A display: flex container is pretty much all we need to create the multiple-column layout.

 

 

2) THREE COLUMNS LAYOUT

2-three-col.html
 <style>
/* (A) FLEXIBLE CONTAINER */
.cols {
  display: flex;
  width: 100%;
}

/* (B) COLUMN WIDTH */
.colA { width: 20%; }
.colB { width: 65%; }
.colC { width: 15%; }

/* (C) COSMETICS - NOT IMPORTANT */
.cols div {
  background: LightYellow;
  border: 1px solid Khaki;
  padding: 10px;
}
</style>
 
<div class="cols">
  <div class="colA">First</div>
  <div class="colB">Second</div>
  <div class="colC">Third</div>
</div>
First
Second
Third

Spotted the differences?

  • To add more columns, we simply insert more <div> into <div class="cols">.
  • flex-grow: 1 is removed, because we are manually specifying the width of each column now.
  • Yep, we just add width: N% to the columns to control the width.

 

 

3) RESPONSIVE COLUMNS

3-responsive.html
<style>
/* (A) FLEXIBLE CONTAINER */
.cols {
  display: flex;
  width: 100%;
}
 
/* (B) COLUMN WIDTH */
.colA { width: 70%; }
.colB { width: 30%; }
 
/* (C) COSMETICS - NOT IMPORTANT */
.cols div {
  background: LightCoral;
  border: 1px solid DarkRed;
  padding: 10px;
}

/* (D) RESPONSIVE */
@media all and (max-width:768px) {
  .cols { flex-wrap: wrap; }
  .colA, .colB { width: 100%; }
}
 
<div class="cols">
  <div class="colA">First</div>
  <div class="colB">Second</div>
</div>
First
Second

Oh no, supporting the small mobile screens with responsive design is so difficult. Not! Keep calm and look carefully:

  • Everything is the same, a display: flex container and setting the width of the columns.
  • The only addition here is @media, these styles will only apply on small screens.
    • .cols { flex-wrap: wrap } allows the columns to wrap into new rows.
    • .colA, .colB { width: 100%; } sets the columns to full width on small screens.

Meaning, we collapse the columns into individual rows on small screens. Go ahead, resize the window and see for yourself.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Multiple Column Layout (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.