If you’re trying to build a two column layout in CSS, there are multiple ways to do it depending on your project needs.
From modern approaches like Flexbox and CSS Grid to older methods like Float and Inline-Block, each technique has its own advantages.
In this guide, you’ll learn 8 practical ways to create a two-column layout with simple examples that you can use in real projects.
1. Flexbox (Most Common)
Flexbox is one of the easiest and most popular ways to create a two-column layout in modern web design. It allows you to align columns side by side with minimal code and provides excellent control over spacing and alignment.
|
1 2 3 4 5 6 7 |
.container{ display:flex; } .col{ width:50%; } |
|
1 2 3 4 |
<div class="container"> <div class="col">Column 1</div> <div class="col">Column 2</div> </div> |
✔ Modern and flexible.
2. Flexbox with Gap (Better Layout)
If you want better spacing between columns, using Flexbox with gap is a smarter way. It eliminates the need for margins and keeps your design clean and consistent.
|
1 2 3 4 5 6 7 8 |
.container{ display:flex; gap:20px; } .col{ flex:1; } |
✔ Automatically adjusts width.
3. CSS Grid (Very Clean)
CSS Grid is a powerful layout system that makes it extremely easy with precise control. It is ideal for structured and complex designs.
|
1 2 3 4 |
.container{ display:grid; grid-template-columns:1fr 1fr; } |
✔ Best for modern layouts.
4. CSS Grid with Gap
When building responsive designs, CSS Grid with gap is one of the cleanest ways to create a two-column layout. It ensures equal spacing and better visual balance between columns.
|
1 2 3 4 5 |
.container{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } |
✔ Clean and responsive.
5. Float Method (Old Method)
The float method is an older technique once widely used. While it still works, it requires clearfix hacks and is not recommended for modern responsive designs.
|
1 2 3 4 |
.col{ width:50%; float:left; } |
✔ Works in very old browsers.
6. Inline-Block Method
The inline-block method is a simple way to create a two-column layout without using Flexbox or Grid. However, it may cause unwanted spacing issues due to whitespace in HTML.
|
1 2 3 4 |
.col{ display:inline-block; width:49%; } |
✔ Simple but spacing issues sometimes.
7. Table Layout
Using display: table is another way to create a two-column layout. It mimics traditional table behavior and can be useful in specific layout scenarios.
|
1 2 3 4 5 6 7 8 |
.container{ display:table; width:100%; } .col{ display:table-cell; } |
✔ Behaves like table columns.
8. Framework Method (Bootstrap Example)
If you want a fast and responsive solution, frameworks like Bootstrap help you quickly create a two-column layout without writing much custom CSS.
If using Bootstrap:
|
1 2 3 4 |
<div class="row"> <div class="col-md-6">Column 1</div> <div class="col-md-6">Column 2</div> </div> |
✔ Very fast for responsive layouts.
✅ Best choices today
- Flexbox
- CSS Grid