3 Column Layouts (Responsive Demos & Example HTML/CSS)

In this article, we'll explore the various types of three-column layouts and show how easy they are to create with the Responsive Columns layout system. You can download all of these demos with the handy link above.

Let's get started.

3 Fixed Columns With Equal-Width & Equal-Height

In this three-column layout, the columns stay side-by-side even on small mobile screens.

The HTML

<r-c join>
    <c1-3 class="red">
        1
    </c1-3>
    <c1-3 class="orange">
        2
    </c1-3>
    <c1-3 class="yellow">
        3
    </c1-3>
</r-c>

We add the 'join' attribute to remove all gutters, join the columns together, and add padding. Learn more about gutter mode and join mode in the documentation.

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}
.yellow {
    background:#f5d55f;
}

We only need CSS for the background colors, all the structural CSS is handled by the Responsive Columns system.

3 Responsive Columns With Equal-Width & Equal-Height

In this three-column layout, the columns are stacked on mobile then sit side-by-side on tablet.

The HTML

<r-c join>
    <c1-1 sm1-3 class="red">
        1
    </c1-1>
    <c1-1 sm1-3 class="orange">
        2
    </c1-1>
    <c1-1 sm1-3 class="yellow">
        3
    </c1-1>
</r-c>

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}
.yellow {
    background:#f5d55f;
}

We only need CSS for the background colors, all the structural CSS is handled by the Responsive Columns system.

3 Column Responsive Layout With Gutters

In this three-column layout, the columns are separated by gutters and stack vertically on mobile then switch to side-by-side on tablet-sized screens and above.

First column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis lectus vel metus pellentesque, eu venenatis est euismod.

Second column. Nulla eget ligula quis purus molestie malesuada non at nibh. Proin a magna ac velit iaculis pretium. Fusce vitae sollicitudin sapien.

Third column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis lectus vel metus pellentesque, eu venenatis est euismod.

The HTML

<r-c>
    <c1-1 sm1-3>
        <!-- first column -->
    </c1-1>
    <c1-1 sm1-3>
        <!-- second column -->
    </c1-1>
    <c1-1 sm1-3>
        <!-- third column -->
    </c1-1>
</r-c>

The Responsive Columns layout system uses tiny custom HTML tags that make coding responsive layouts a breeze. You don't need to know any complicated CSS. See the documentation for more details on the custom HTML tags.

Full-Screen 3 Column Layout With Vertically Centered Content

In this three-column layout, the columns are forced to the height of your browser window but their content is vertically centered. This is great for titles or page sections that need to have a big impact as users scroll down.

The HTML

<r-c join class="full-height">
    <c1-3 r-c middle class="red">
        <c1-1>
            <!-- column 1 content -->
        </c1-1>
    </c1-3>
    <c1-3 r-c middle class="orange">
        <c1-1>
            <!-- column 2 content -->
        </c1-1>
    </c1-3>
    <c1-3 r-c middle class="yellow">
        <c1-1>
            <!-- column 3 content -->
        </c1-1>
    </c1-3>
</r-c>

The vertical centering is achieved by nesting columns and then adding a vertical alignment. See the powerful things you can achieve with nesting here: column nesting documentation.

The CSS

.full-height {
    min-height:100vh; /* vh = viewport height */
}
.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}
.yellow {
    background:#f5d55f;
}

Main Content Column With Left & Right Sidebars

In this three-column layout, the main content column is in the center and sidebars are on either side. On mobile, the columns are stacked vertically and the main content comes first. For a full page version that includes a header and footer see my holy grail responsive layout.

The HTML

<r-c join>
    <c1-1 md2-4 class="yellow">
        <!-- Main content -->
    </c1-1>
    <c1-1 md1-4 md1 class="red">
        <!-- Left sidebar -->
    </c1-1>
    <c1-1 md1-4 class="orange">
        <!-- Right sidebar -->
    </c1-1>
</r-c>

We change the column orders by adding order attributes to the column tags, see how this works in the documentation here: column reordering

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}
.yellow {
    background:#f5d55f;
}

3 Separate Boxes With Padded Content

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

The HTML

<r-c class="heading-boxes">
    <c1-1 md1-3>
        <h3>Heading 1</h3>
        <div>
            <!-- box 1 content -->
        </div>
    </c1-1>
    <c1-1 md1-3>
        <h3>Heading 2</h3>
        <div>
            <!-- box 2 content -->
        </div>
    </c1-1>
    <c1-1 md1-3>
        <h3>Heading 3</h3>
        <div>
            <!-- box 3 content -->
        </div>
    </c1-1>
</r-c>

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

The CSS

.heading-boxes > * {
    background:#fff;
    border-radius:.4em;
    overflow:hidden;
}
.heading-boxes > * > h1,
.heading-boxes > * > h2,
.heading-boxes > * > h3 {
    background:#f97171;
    margin:0;
    padding:.5em calc(8px + 1.5625vw);
}
.heading-boxes > * > div {
    padding:0 calc(8px + 1.5625vw) .5em;
}

The calc(8px + 1.5625vw) formula creates responsive padding that grows with your screen size. See the Responsive Columns documentation for more details: Layout dimensions.

3 Column Product Comparison Layout

In this three-column layout, we compare product features and highlight the central product as the most popular. Here are the main features of this layout:

• Mobile friendly: The three columns remail side-by-side on mobile. This is done by reducing the features to only ticks and crosses on the left and right options.
• Highlighted option: The centeral option has been highlighted by lifting it above the others with a drop shadow, plus a 'Most Popular' banner is added.
• Works on larger screens: On larger screens all three options are given the same width and the feature text appears in all. An outer margin is also added.

The HTML

<r-c join class="comparison">
    <c1-4 md1-3 class="yellow">
        <h3>Free</h3>
        <p class="price">$0</p>
        <ul>
            <li class="tick"><span>Feature 1</span></li>
            <li class="tick"><span>Feature 2</span></li>
            <li class="tick"><span>Feature 3</span></li>
            <li class="cross"><span>Feature 4</span></li>
            <li class="cross"><span>Feature 5</span></li>
            <li class="cross"><span>Feature 6</span></li>
            <li class="cross"><span>Feature 7</span></li>
            <li class="cross"><span>Feature 8</span></li>
        </ul>
        <a class="button" href="#">Go<span> Free</span></a>
    </c1-4>
    <c2-4 md1-3 class="orange">
        <h3>Standard</h3>
        <p class="price">$49</p>
        <ul>
            <li class="tick">Feature 1</li>
            <li class="tick">Feature 2</li>
            <li class="tick">Feature 3</li>
            <li class="tick">Feature 4</li>
            <li class="tick">Feature 5</li>
            <li class="tick">Feature 6</li>
            <li class="cross">Feature 7</li>
            <li class="cross">Feature 8</li>
        </ul>
        <a class="button" href="#">Go Standard</a>
    </c2-4>
    <c1-4 md1-3 class="red">
        <h3>Pro</h3>
        <p class="price">$99</p>
        <ul>
            <li class="tick"><span>Feature 1</span></li>
            <li class="tick"><span>Feature 2</span></li>
            <li class="tick"><span>Feature 3</span></li>
            <li class="tick"><span>Feature 4</span></li>
            <li class="tick"><span>Feature 5</span></li>
            <li class="tick"><span>Feature 6</span></li>
            <li class="tick"><span>Feature 7</span></li>
            <li class="tick"><span>Feature 8</span></li>
        </ul>
        <a class="button" href="#">Go<span> Pro</span></a>
    </c1-4>
</r-c>

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

The CSS

.comparison {
    margin-top:2.5em;
}
.comparison > * {
    position:relative;
    padding:0;
    text-align:center;
}
.comparison > :nth-child(2) {
    z-index:10;
    box-shadow:0 5px 10px rgba(0, 0, 0, 25%);
}
.comparison > :nth-child(2):before {
    content:"Most Popular";
    display:block;
    position:absolute;
    top:-2em;
    left:0;
    right:0;
    line-height:2em;
    background:#000;
    color:#fff;
    border-top-left-radius:.4em;
    border-top-right-radius:.4em;
}
.comparison ul {
    list-style:none;
    margin:0;
    padding:0;
    background:#fff;
}
.comparison li {
    white-space:nowrap;
    line-height:2.2em;
    border-top:1px solid #eee;
}
.comparison li:first-child {
    border-top:0;
}
.comparison li.tick:before {
    content: '✓ ';
    color:#006e37;
    font-weight:bold;
    font-size:1.3em;
}
.comparison li.cross:before {
    content: '✗ ';
    color:#ec1358;
    font-weight:bold;
    font-size:1.3em;
}
.comparison h3 {
    margin:0;
    padding:.4em 0 0;
}
.comparison .price {
    margin:0 0 .2em;
    font-size:2em;
    font-weight:bold;
}
.comparison span {
    display:none;
}
.comparison .button {
    display:inline-block;
    margin:.5em 0;
    padding:.4em .5em;
    background:#fff;
    color:#000;
    text-decoration:none;
    font-weight:bold;
    border-radius:.4em;
}
.comparison > :nth-child(2) .button {
    background:#000;
    color:#fff;
}
@media (min-width:900px) {
    .comparison {
        margin:2.5em calc(8px + 1.5625vw);
    }
    .comparison span {
        display:inline;
    }
}

The calc(8px + 1.5625vw) formula creates responsive padding that grows with your screen size. See the Responsive Columns documentation for more details: Layout dimensions.

3 Column Layout With Semantic HTML5 Tags

This three-column layout uses semantic HTML5 tags. The columns stack on mobile and sit side-by-side on tablet and larger devices.

The HTML

<article data-r-c data-join>
    <section data-c1-1 data-sm1-3 class="red">
       <!-- Column 1 -->
    </section>
    <section data-c1-1 data-sm1-3 class="orange">
       <!-- Column 2 -->
    </section>
    <section data-c1-1 data-sm1-3 class="yellow">
       <!-- Column 3 -->
    </section>
</article>

The Responsive Columns system is compatible with semantic tags. Full details here: How to use semantic HTML tags with responsive columns.

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}
.yellow {
    background:#f5d55f;
}

The Responsive Columns Layout System Is Simple And Powerful

You can easily change the widths of your columns and change how they respond to different screen sizes.

Refer to the Responsive Columns Documentation to see how easy it is to create responsive layouts to your exact requirements.