1
2
3
4
5
6
7
8
14 Feb 2022 — Updated 20 Mar 2023
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.
In this eight-column layout, the columns stay side-by-side even on small mobile screens.
1
2
3
4
5
6
7
8
<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.
.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.
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
<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.
.red {
background:#f97171;
}
.orange {
background:#f99e50;
}
.yellow {
background:#f5d55f;
}
.green {
background:#c5ed77;
}
.blue {
background:#72c2f1;
}
.purple {
background:#987ded;
}
.pink {
background:#dc7ded;
}
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
<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.
.red {
background:#f97171;
}
.orange {
background:#f99e50;
}
.yellow {
background:#f5d55f;
}
.green {
background:#c5ed77;
}
.aqua {
background:#72f1d4;
}
.blue {
background:#72c2f1;
}
.purple {
background:#987ded;
}
.pink {
background:#dc7ded;
}
Responsive Columns works in all modern browsers, plus all old browsers that support Flexbox:
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.
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.
Responsive Columns:
Responsive Attributes:
Equal-Height Columns
Holy Grail 3-Column Responsive Layout
Bottom Footer
How to add CSS to HTML
ID vs Class: Which CSS Selector Should You Use?
© 1994 — 2024 Matthew James Taylor