2 Column Layouts (Responsive, Flexbox & CSS Grid)

Static 2 Column Layout (CSS Grid)

This two-column layout uses CSS grid to make the columns stay side-by-side, equal-width, and equal-height even on small mobile screens.

Live demo

The HTML

<div class="two-columns-grid">
    <div>1</div>
    <div>2</div>
</div>

The CSS

/* container */
.two-columns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* columns */
.two-columns-grid > * {
    padding:1rem;
}

Responsive 2 Column Layout (CSS Grid)

This two-column layout has stacked columns on mobile, and uses flexbox to align columns side-by-side on tablet and larger devices.

Live demo

The HTML

<div class="responsive-two-column-grid">
    <div>1</div>
    <div>2</div>
</div>

The CSS

/* container */
.responsive-two-column-grid {
    display:block;
}

/* columns */
.responsive-two-column-grid > * {
    padding:1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .responsive-two-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

Static 2 Column Layout (Flexbox)

This two-column layout uses flexbox to make the columns stay side-by-side, equal-width, and equal-height even on small mobile screens.

Live demo

The HTML

<div class="two-columns">
    <div>1</div>
    <div>2</div>
</div>

The CSS

/* container */
.two-columns {
    display:flex;
}

/* columns */
.two-columns > * {
    width:50%;
    padding:1rem;
}

The element types used for the container and columns are not specifically referenced in the CSS so you don't have to use divs, you are free to use any kind of element, eg: <article>, <section>, <figure>, or whatever is best for your situation.

I recommend custom elements instead of divs. See why they're so much better in my article: Replace Divs With Custom Elements For Superior Markup.

/* container */
.two-columns {
    display:flex;
    column-gap:2rem;
}

/* columns */
.two-columns > * {
    width:calc(50% - 1rem);
}

Responsive 2 Column Layout (Flexbox)

This two-column layout has stacked columns on mobile, and uses flexbox to align columns side-by-side on tablet and larger devices.

Live demo

The HTML

<div class="responsive-two-columns">
    <div>1</div>
    <div>2</div>
</div>

The CSS

/* container */
.responsive-two-columns {
    display:flex;
    flex-wrap:wrap;
}

/* columns */
.responsive-two-columns > * {
    width:100%;
    padding:1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .responsive-two-columns > * {
        width:50%;
    }
}

Left Sidebar 2 Column (flexbox)

In this two-column layout, the main content is above the sidebar on mobile, and on tablet the sidebar is left of the main content.

For a full page version that includes a header and footer see my left sidebar responsive layout.

Live demo

The HTML

<div class="left-sidebar">
    <div>Main content</div>
    <div>Left sidebar</div>
</div>

The CSS

/* container */
.left-sidebar {
    display:flex;
    flex-wrap:wrap;
}

/* columns */
.left-sidebar > * {
    width:100%;
    padding:1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .left-sidebar > *:nth-child(1) {
        width:calc(100% / 3 * 2);
    }
    .left-sidebar > *:nth-child(2) {
        width:calc(100% / 3);
        order:-1;
    }
}

Right Sidebar 2 Column (flexbox)

In this two-column layout, the main content is above the sidebar on mobile, and on tablet the sidebar is right of the main content.

For a full page version that includes a header and footer see my right sidebar responsive layout.

Live demo

The HTML

<div class="right-sidebar">
    <div>Main content</div>
    <div>Right sidebar</div>
</div>

The CSS

/* container */
.right-sidebar {
    display:flex;
    flex-wrap:wrap;
}

/* columns */
.right-sidebar > * {
    width:100%;
    padding:1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .right-sidebar > *:nth-child(1) {
        width:calc(100% / 3 * 2);
    }
    .right-sidebar > *:nth-child(2) {
        width:calc(100% / 3);
    }
}

Love Heart 2 Column Layout

Create a two-column photo love heart design with creative border radius settings.

This layout is designed to work with a square image background.

The HTML

<div class="heart">
    <div>
        <br>
    </div>
    <div>
        <br>
    </div>
</div>

/* container */
.love-heart {
    display:flex;
    margin:0;
    padding:1rem;
    width:100%;
    aspect-ratio:1 / 1;
    /* min-height:100vh; */
    background:#f97171;
}

/* left column */
.love-heart > :first-child {
    width:50%;
    border-radius:50% 50% 0% 100% / 36% 26% 74% 64%;
    background-color:#fff;
    background-image:url(https://picsum.photos/640/640);
    background-size:cover;
    background-position:left 50%;
}

/* right column */
.love-heart > :last-child {
    width:50%;
    border-radius:50% 50% 100% 0% / 26% 36% 64% 74%;
    background-color:#fff;
    background-image:url(https://picsum.photos/640/640);
    background-size:cover;
    background-position:right 50%;
}

Open Book 2 Column Layout

Create the illusion of an open book by skewing the left and right columns to make pages.

The HTML

<div class="open-book">
    <div>
        <!-- left page content -->
    </div>
    <div>
        <!-- right page content -->
    </div>
</div>

The CSS

/* book cover (container) */
.open-book {
    display:flex;
    margin:2rem 1rem 1rem;
    padding:1rem;
    background:#7e1010;
    border-radius:.3rem;
    gap:0;
}

/* left page */
.open-book > :first-child {
    transform-origin:100% 100%;
    transform:skew(0, 4deg);
    background:linear-gradient(90deg, #eee 0%, #fff 100%);
    padding:0 1em;
}

/* right page */
.open-book > :last-child {
    transform-origin:0 100%;
    transform:skew(0, -4deg);
    background:linear-gradient(90deg, #ddd 0%, #eee 100%);
    padding:0 1em;
}

Padded Boxes With Headings (flexbox)

In this two-column layout, each column has a colored heading and a padded grey box of content. each box is separated by a gutter. On mobile, the boxes are stacked vertically, on tablet and bigger, they sit side-by-side.

Live demo

The HTML

<div class="padded-boxes">
    <section>
        <h3 class="heading">Heading 1</h3>
        <div class="padded">
            <!-- box 1 content -->
        </div>
    </section>
    <section>
        <h3 class="heading">Heading 2</h3>
        <div class="padded">
            <!-- box 2 content -->
        </div>
    </section>
</div>

You can add as many boxes as you like, they will simply wrap to multiple rows of two boxes wide.

The CSS

/* container */
.padded-boxes {
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
}

/* boxes */
.padded-boxes > * {
    width:100%;
    background:#eee;
    border-radius:.4rem;
}

/* headings */
.padded-boxes .heading {
    background:#f97171;
    margin:0;
    padding:1rem;
    border-top-left-radius:.4rem;
    border-top-right-radius:.4rem;
}

/* padded content */
.padded-boxes .padded {
    padding:.1rem 1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .padded-boxes > * {
        width:calc(50% - 1rem);
    }
}

Static 2 Column Layout (Responsive Attributes)

In this two-column layout, I use my Responsive Attributes system to layout the columns side-by-side.

Live demo

The HTML

My Responsive Attributes system uses simple data-attributes to define the columns for each breakpoint:

<div data-sm="2column">
    <div>1</div>
    <div>2</div>
</div>

No CSS required

The Responsive Attributes system handles all the structural CSS for you. Learn how it works.

Responsive 2 Column (Responsive Attributes)

In this two-column layout, the columns are stacked on mobile then sit side-by-side on tablet. This is achieved with my Responsive Attributes system.

Live demo

The HTML

We simply specify 1 column for mobile breakpoints (sm), and 2 columns for tablet breakpoints (md) by adding two data-attributes:

<div data-sm="1column" data-md="2column">
    <div>1</div>
    <div>2</div>
</div>

No CSS required!

The Responsive Attributes system handles all the structural CSS for you. Learn how it works.

Static 2 Column Layout (Responsive Columns)

In this two-column layout, I use my Responsive Columns system to layout the columns side-by-side.

Live demo

The HTML

My Responsive Columns system uses tiny custom tags to define the layout:

<r-c join>
    <c1-2>
        1
    </c1-2>
    <c1-2>
        2
    </c1-2>
</r-c>

No CSS required

The Responsive Columns system handles all the structural CSS for you. Learn how it works.

Responsive 2 Column (Responsive Columns)

In this two-column layout, the columns are stacked on mobile then sit side-by-side on tablet. This is achieved with my Responsive Columns system.

Live demo

The HTML

<r-c join>
    <c1-1 sm1-2>
        1
    </c1-1>
    <c1-1 sm1-2>
        2
    </c1-1>
</r-c>

No CSS required!

The Responsive Columns system handles all the structural CSS for you. Learn how it works.

Need to support old browsers?

If you need to achieve 3 equal-height columns in old browsers (back to IE 5.5) that don't support CSS grid or flexbox, you can use my nested equal-height columns method, here is an example of a 2 column layout without flexbox.

“I've been developing websites professionally for over two decades and running this site since 1997! During this time I've found many amazing tools and services that I cannot live without.”
— Matthew James Taylor

I highly Recommend:

Canva — Best Graphic Design Software

Create professional graphics and social media imagery with an intuitive online interface.

Learn more

SiteGround — Best Website Hosting

Professional Wordpress hosting with 24/7 customer support that is the best in the industry, hands down!

Learn more

Ezoic — Best ad network for publishers

Earn more than double the revenue of Google Adsense. It's easy to set up and there's no minimum traffic requirements.

Learn more

Surfer SEO — Best Content Optimization Tool

Use the power of AI to optimise your website content and increase article rankings on Google.

Learn more

See more of my recommended dev tools.