Holy Grail Layout

Left Sidebar Layout

Right Sidebar Layout

Full Page Layout

1 Column

2 Columns

3 Columns

4 Columns

5 Columns

6 Columns

7 Columns

8 Columns

Matthew James Taylor Matthew James Taylor

Web design ›

8 Column Responsive Website Layouts

14 Feb 2022 — Updated 15 Jan 2023

Download

These layouts all use the Responsive Columns layout system.

Download All Demos
(responsive-columns.zip 155k)

In this article, I will cover the various types of eight-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.

8 Fixed Columns With Equal-Width & Equal-Height

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

1

2

3

4

5

6

7

8

The HTML

<r-c join>
    <c1-8 class="red">
        <!-- 1 -->
    </c1-8>
    <c1-8 class="orange">
        <!-- 2 -->
    </c1-8>
    <c1-8 class="yellow">
        <!-- 3 -->
    </c1-8>
    <c1-8 class="green">
        <!-- 4 -->
    </c1-8>
    <c1-8 class="aqua">
        <!-- 5 -->
    </c1-8>
    <c1-8 class="blue">
        <!-- 6 -->
    </c1-8>
    <c1-8 class="purple">
        <!-- 7 -->
    </c1-8>
    <c1-8 class="pink">
        <!-- 8 -->
    </c1-8>
</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;
}
.green {
    background:#c5ed77;
}
.aqua {
    background:#72f1d4;
}
.blue {
    background:#72c2f1;
}
.purple {
    background:#987ded;
}
.pink {
    background:#dc7ded;
}

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

8 Responsive Columns With Equal-Width & Equal-Height

In this eight-column layout, the columns are stacked on mobile, two columns wide on tablet portrait, three columns wide on tablet landscape, four columns wide on desktop.

1

2

3

4

5

6

7

8

The HTML

<r-c join sm1-2 md1-3 lg1-4>
    <c1-1 class="red">
        <!-- 1 -->
    </c1-1>
    <c1-1 class="orange">
        <!-- 2 -->
    </c1-1>
    <c1-1 class="yellow">
        <!-- 3 -->
    </c1-1>
    <c1-1 class="green">
        <!-- 4 -->
    </c1-1>
    <c1-1 class="aqua">
        <!-- 5 -->
    </c1-1>
    <c1-1 class="blue">
        <!-- 6 -->
    </c1-1>
    <c1-1 class="purple">
        <!-- 7 -->
    </c1-1>
    <c1-1 class="pink">
        <!-- 8 -->
    </c1-1>
</r-c>

Add as many columns as you like and they will follow the same number of columns per breakpoint.

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}
.yellow {
    background:#f5d55f;
}
.green {
    background:#c5ed77;
}
.blue {
    background:#72c2f1;
}
.purple {
    background:#987ded;
}
.pink {
    background:#dc7ded;
}

8 Column Layout With Semantic HTML5 Tags

This eight-column layout uses semantic HTML5 tags. The columns stack on mobile, are two wide on tablet portrait, three columns wide on tablet landscape, and four columns wide on desktop.

1

2

3

4

5

6

7

8

The HTML

<article data-r-c data-join data-sm1-2 data-md1-3 data-lg1-4>
    <section class="red">
        <!-- 1 -->
    </section>
    <section class="orange">
        <!-- 2 -->
    </section>
    <section class="yellow">
        <!-- 3 -->
    </section>
    <section class="green">
        <!-- 4 -->
    </section>
    <section class="aqua">
        <!-- 5 -->
    </section>
    <section class="blue">
        <!-- 6 -->
    </section>
    <section class="purple">
        <!-- 7 -->
    </section>
    <section class="pink">
        <!-- 8 -->
    </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;
}
.green {
    background:#c5ed77;
}
.aqua {
    background:#72f1d4;
}
.blue {
    background:#72c2f1;
}
.purple {
    background:#987ded;
}
.pink {
    background:#dc7ded;
}

Full Browser Support

Responsive Columns works in all modern browsers, plus all old browsers that support Flexbox:

Need to support old browsers?

If you need to achieve 8 equal-height columns in old browsers that don't support flexbox CSS (back to IE 5.5), you can use my nested equal-height columns method.

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.

Best Web Development Tools (Free & Paid)

Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

Padding bewteen desktop, tablet, and mobile

Responsive Padding, Margin & Gutters With CSS Calc

Racing car made from custom tags

Custom HTML Tags (18 Things To Know Before Using Them)

Looking into an empty div

Empty HTML Tags (21 Weird Things You Need To Know!)

A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Is CSS margin top or bottom better?

CSS: Margin Top vs Bottom (A Trick You Should Know)

Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

Footer at the bottom of the page

Get Down! How to Keep Footers at the Bottom of the Page

Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Web design Architecture Life drawing Art gallery Synesthesia Comics

About Contact Privacy

© 1994 — 2023 Matthew James Taylor