Column 1
Column 2
Column 3
Column 4
11 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 four-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 four-column layout, the columns stay side-by-side even on small mobile screens.
1
2
3
4
<r-c join>
<c1-4 class="red">
<!-- 1 -->
</c1-4>
<c1-4 class="orange">
<!-- 2 -->
</c1-4>
<c1-4 class="yellow">
<!-- 3 -->
</c1-4>
<c1-4 class="green">
<!-- 4 -->
</c1-4>
</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;
}
We only need CSS for the background colors, all the structural CSS is handled by the Responsive Columns system.
In this four-column layout, the columns are stacked on mobile, two columns wide on tablet portrait, and four columns wide on tablet landscape and wider.
1
2
3
4
<r-c join>
<c1-1 sm1-2 md1-4 class="red">
<!-- 1 -->
</c1-1>
<c1-1 sm1-2 md1-4 class="orange">
<!-- 2 -->
</c1-1>
<c1-1 sm1-2 md1-4 class="yellow">
<!-- 3 -->
</c1-1>
<c1-1 sm1-2 md1-4 class="green">
<!-- 4 -->
</c1-1>
</r-c>
.red {
background:#f97171;
}
.orange {
background:#f99e50;
}
.yellow {
background:#f5d55f;
}
.green {
background:#c5ed77;
}
We only need CSS for the background colors, all the structural CSS is handled by the Responsive Columns system.
In this four-column layout, the columns are separated by gutters. The columns stack vertically on mobile, are two columns wide on tablet portrait, and four columns wide on tablet landscape 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. Quisque iaculis lectus vel metus pellentesque, eu venenatis est euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fourth column. Proin a magna ac velit iaculis pretium. Nulla eget ligula quis purus molestie malesuada non at nibh. Fusce vitae sollicitudin sapien.
<r-c>
<c1-1 sm1-2 md1-4>
<!-- first column -->
</c1-1>
<c1-1 sm1-2 md1-4>
<!-- second column -->
</c1-1>
<c1-1 sm1-2 md1-4>
<!-- third column -->
</c1-1>
<c1-1 sm1-2 md1-4>
<!-- fourth 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.
No CSS is required for this layout because all the work is done by the Responsive Columns system.
In this four-column layout, the set of columns are forced to the height of your browser window but their content is vertically centered.
On mobile the columns are stacked, on tablet portrait the columns are in a two-by-two grid, and on desktop the columns are four across.
Col 1
Col 2
Col 3
Col 4
<r-c join class="full-height">
<c1-1 sm1-2 lg1-4 r-c middle class="red">
<c1-1>
<!-- Column 1 content -->
</c1-1>
</c1-1>
<c1-1 sm1-2 lg1-4 r-c middle class="orange">
<c1-1>
<!-- Column 2 content -->
</c1-1>
</c1-1>
<c1-1 sm1-2 lg1-4 r-c middle class="yellow">
<c1-1>
<!-- Column 3 content -->
</c1-1>
</c1-1>
<c1-1 sm1-2 lg1-4 r-c middle class="green">
<c1-1>
<!-- Column 4 content -->
</c1-1>
</c1-1>
</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.
.full-height {
min-height:100vh; /* vh = viewport height */
}
.red {
background:#f97171;
}
.orange {
background:#f99e50;
}
.yellow {
background:#f5d55f;
}
.green {
background:#c5ed77;
}
This four-column layout uses border-radius and background images to create a round window design.
<r-c class="round-window">
<c1-2>
<br>
</c1-2>
<c1-2>
<br>
</c1-2>
<c1-2>
<br>
</c1-2>
<c1-2>
<br>
</c1-2>
</r-c>
.round-window {
min-height:100vw;
background:#72c2f1;
margin:0;
padding:calc(8px + 1.5625vw);
}
.round-window > * {
background-color:#fff;
background-size:cover;
background-position:50% 50%;
}
.round-window > :nth-child(1) {
border-top-left-radius:100%;
background-image:url(https://picsum.photos/640/640);
}
.round-window > :nth-child(2) {
border-top-right-radius:100%;
background-image:url(https://picsum.photos/640/640);
}
.round-window > :nth-child(3) {
border-bottom-left-radius:100%;
background-image:url(https://picsum.photos/640/640);
}
.round-window > :nth-child(4) {
border-bottom-right-radius:100%;
background-image:url(https://picsum.photos/640/640);
}
Note: I'm using Lorem Picsum for random photos as the column backgrounds. You can use whatever images you like.
This four-column layout is a set of responsive cards with images and clickable captions. The links are made larger with pseudo elements to make the whole card clickable (see the explanation below).
<r-c sm1-2 md1-3 lg1-4 class="image-cards">
<c1-1>
<figure>
<img src="https://picsum.photos/640/480" width="640" height="480" alt="Nature image" />
<figcaption><a href="#image-cards">Clickable caption</a></figcaption>
</figure>
</c1-1>
<c1-1>
<figure>
<img src="https://picsum.photos/640/480" width="640" height="480" alt="Nature image" />
<figcaption><a href="#image-cards">Clickable caption</a></figcaption>
</figure>
</c1-1>
<c1-1>
<figure>
<img src="https://picsum.photos/640/480" width="640" height="480" alt="Nature image" />
<figcaption><a href="#image-cards">Clickable caption</a></figcaption>
</figure>
</c1-1>
<c1-1>
<figure>
<img src="https://picsum.photos/640/480" width="640" height="480" alt="Nature image" />
<figcaption><a href="#image-cards">Clickable caption</a></figcaption>
</figure>
</c1-1>
</r-c>
You can add as many cards in the set of columns as you like.
.image-cards > * {
background:#fff;
border-radius:.5em;
overflow:hidden;
box-shadow:0 5px 10px rgba(0, 0, 0, 25%);
position:relative;
}
.image-cards figure {
margin:0;
padding:0;
display:block;
}
.image-cards img {
display:block;
max-width:100%;
height:auto;
}
.image-cards figcaption {
margin:0;
padding:.5em 1em;
text-align:center;
font-style:italic;
}
.image-cards figcaption a {
text-decoration:none;
}
.image-cards figcaption a:hover {
text-decoration:underline;
}
.image-cards figcaption a:after {
content:"";
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
To make a whole card clickable, put a position:relative;
on the card container, add an :after
pseudo element to the link and position it absolutely with top, left, right, and bottom dimensions set to zero. This will make the link's clickable area equal to the full size of the card.
This four-column layout includes arrows to so the progression between steps. The steps stact vertically on mobile, form two columns on tablet, and a single row of four columns on desktop. The arrows always point to the next step up to a maximum of 4 steps.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque iaculis lectus vel metus pellentesque.
Quisque iaculis lectus vel metus pellentesque, eu venenatis est euismod.
Consectetur adipiscing elit. Quisque iaculis lectus vel metus pellentesque.
<r-c sm1-2 lg1-4 class="step-arrows">
<c1-1>
<h3>Step 1.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</c1-1>
<c1-1>
<h3>Step 2.</h3>
<p>Quisque iaculis lectus vel metus pellentesque.</p>
</c1-1>
<c1-1>
<h3>Step 3.</h3>
<p>Quisque iaculis lectus vel metus pellentesque, eu venenatis est euismod.</p>
</c1-1>
<c1-1>
<h3>Step 4.</h3>
<p>Consectetur adipiscing elit. Quisque iaculis lectus vel metus pellentesque.</p>
</c1-1>
</r-c>
.step-arrows > * {
background:#fff;
padding:0;
border:2px solid #444;
position:relative;
}
.step-arrows > *:before {
content:"";
display:block;
position:absolute;
width:calc((8px + 1.5625vw)*2);
height:calc((8px + 1.5625vw)*2/3);
background-image:url('data:image/svg+xml;utf8,<svg width="150" height="50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 50"><path fill="%23ec1358" d="M90 0v13.15H0v23.7h90V50l60-25z"/></svg>');
background-size:contain;
background-repeat:no-repeat;
z-index:10;
}
.step-arrows > *:first-child:before {
display:none;
}
.step-arrows > * h3 {
background:#444;
color:#fff;
margin:0;
padding:.4em 1em .5em;
}
.step-arrows > * p {
margin:0;
padding:.5em 1em;
}
@media (max-width:599px) {
.step-arrows > *:before {
right:50%;
bottom:100%;
transform:translate(50%, calc(-50% + 4px)) rotate(90deg);
}
}
@media (min-width:600px) and (max-width:1199px) {
.step-arrows > *:before {
top:50%;
right:100%;
transform:translate(calc((8px + 1.5625vw)/2), -50%);
}
.step-arrows > *:nth-child(2n+1):before {
transform:translate(-24%, -30%) rotate(135deg);
top:auto;
right:auto;
left:100%;
bottom:100%;
}
}
@media (min-width:1200px) {
.step-arrows > *:before {
top:50%;
right:100%;
transform:translate(calc((8px + 1.5625vw)/2), -50%);
}
}
This four-column layout uses semantic HTML5 tags. The columns stack on mobile, are two wide on tablet, and four wide on larger devices.
Column 1
Column 2
Column 3
Column 4
<article data-r-c data-join>
<section data-c1-1 data-sm1-2 data-md1-4 class="red">
<!-- Column 1 -->
</section>
<section data-c1-1 data-sm1-2 data-md1-4 class="orange">
<!-- Column 2 -->
</section>
<section data-c1-1 data-sm1-2 data-md1-4 class="yellow">
<!-- Column 3 -->
</section>
<section data-c1-1 data-sm1-2 data-md1-4 class="green">
<!-- Column 4 -->
</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;
}
Responsive Columns works in all modern browsers, plus all old browsers that support Flexbox:
If you need to achieve 4 equal-height columns in old browsers (back to IE 5.5) that don't support flexbox CSS, you can use my nested equal-height columns method, here is an example of a 4 column layout without flexbox.
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