Must-Know CSS Flexbox Responsive Multi-Column Layout Explained
In this article, I’ll be showing you how to easily create responsive multi-column mobile friendly layouts using CSS Flexbox.
If you have a Shopify store, this article will help you design your product description page so that you don’t have to pay a monthly subscription fee for an app that does this.
What are we building?
A lot to cover, so let’s get started!
- Single Column Layout
- Two Column Flexbox Layout
- Two Column Reverse Flexbox Layout
- Two Column Mobile Layout
- Three Column Flexbox Layout
- Three Column Mobile Layout
Single Column Layout
The HTML code for the single column is pretty straight forward.
!-- SINGLE COLUMN -->
<section class="one-column">
<h2>This beautiful 3-piece comforter set takes the guesswork out of coordinating colors and textures.</h2>
<img src="https://cdn.shopify.com/s/files/1/0506/3127/8767/files/301500x1500.jpg?v=1611944972" alt="">
</section>The section is the top-level element that has three children elements:
section→ is a block-level element that spans horizontally across the width of its parent in this case<body>.h2→ is also a block level element and has a title content.img→ is an element where I pulled an image from the URL and set its src attribute (sometimes images comes with fixed width and height which may go beyond its parent width).
To make the image fit to its parent width, add these couple of properties to the img CSS selector:
- width:100% → will fit the image to its parent width.
- height:auto → will adjust the image height proportionate to its width.
/* ONE COLUMN */
.one-column {
text-align:center;
}
img {
width:100%;
height:auto;
}And the single column layout works right off the bat like the image below, even in the mobile view without using Flexbox. 🙂
That’s nice!
Now let’s take a look at how to create a two column layout using Flexbox.
Recommended
3 Ways To Make A Div Full Screen Using CSS
Two Column Flexbox Layout
The two column HTML markup has a top-level section element with the class name two-column and of course two divs inside representing left and right columns.
<section class="two-column">
<div>1</div>
<div>2</div>
</section>As you know, div is a block-level element so the output with the above code looks like the image below.
To make the two column layout, make both divs appear beside each other instead of below the other.
Traditionally, we use inline-block or float to achieve this.
Recommended
3 Ways To Make A Div Full Screen Using CSS
With Flexbox, we can do it with a couple of CSS Flexbox properties:
- display:flex
- flex-direction:row → is a default behaviour that you often don’t need. It lays its children beside each other, which is exactly what we want to make the two columns.
/* TWO COLUMN FLEXBOX */
.two-column {
display:flex;
flex-direction:row;
}
This works.
Now, let’s spread these two divs evenly to fill its parent width horizontally.
To do that, add flex:1 css rule to the inner divs.
/* TWO COLUMN FLEXBOX */
.two-column div {
flex:1;
border:1px solid blue;
}I’ve also added the border to them just for viewing purposes.
Now, let’s add some content on the left column and an image on the right.
<section class="two-column">
<div>
<h2>Comfy & Cozy</h2>
<p>The ultra-soft <strong>300 GSM </strong>hypoallergenic microfiber filling will keep you warm 🔥 for a better sleep during 🥶 cold nights.
</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0506/3127/8767/files/2-1.jpg?v=1611450960" alt="">
</div>
</section>The layout will look like this right away!
And its not bad…
Now, let’s center the content horizontally and vertically using Flexbox.
To do that, we need to add these three Flexbox CSS rules to the inner div:
- Display:flex;
- Justify-content: center;
- Align-items: center;
/* TWO COLUMN FLEXBOX */
.two-column div {
border:1px solid blue;
flex:1;
display:flex;
justify-content:center;
align-items:center;
}
As you can see, I use nested 🕸 Flexbox which is more common when using Flexbox.
Wait…
Something is messed up.
Both the heading and paragraph are trying to be in the middle of the div horizontally and vertically.
However, what we want is to keep them one below the other, probably the title at the top and the paragraph at the bottom. Let’s do this first before centering them.
To do that, wrap both elements with a span element.
This way, Flexbox properties will be applied to the span element instead of the heading and paragraph inside.
<section class="two-column">
<div>
<span>
<h2>Comfy & Cozy</h2>
<p>The ultra-soft <strong>300 GSM </strong>hypoallergenic microfiber filling will keep you warm 🔥 for a better sleep during 🥶 cold nights.
</p>
</span>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0506/3127/8767/files/2-1.jpg?v=1611450960" alt="">
</div>
</section>Next, center the heading and paragraph text as well.
/* TWO COLUMN FLEXBOX */
two-column div {
...
text-align:center;
}
This looks good!
If you look at any landing page layouts, the second two column layout will have an image on the left and content on the right and so on.
Let’s see how to do exactly that.
Two Column Reverse Flexbox Layout
Lets add one more two column markup with the exact code like before with new content and image.
<!-- TWO COLUMN -->
<section class="two-column">
<div>
<span>
<h2>Stylish Pinch-Pleated Desig</h2>
<p>The ultra-soft <strong>300 GSM </strong>hypoallergenic microfiber filling will keep you warm 🔥 for a better sleep during 🥶 cold nights.
</p>
</span>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0506/3127/8767/files/5-1500x1500.jpg?v=1611967167" alt="">
</div>
</section>And the output will look like this.
All we have to do is to flip the content and image divs inside the sections block.
<!-- TWO COLUMN -->
<section class="two-column">
<div>
<img src="https://cdn.shopify.com/s/files/1/0506/3127/8767/files/5-1500x1500.jpg?v=1611967167" alt="">
</div>
<div>
<span>
<h2>Stylish Pinch-Pleated Desig</h2>
<p>The ultra-soft <strong>300 GSM </strong>hypoallergenic microfiber filling will keep you warm 🔥 for a better sleep during 🥶 cold nights.
</p>
</span>
</div>
</section>
This works but there is a better way.
Instead of changing the HTML markup order, create a CSS modifier class called reverse.
Attach it to the any two column section element that needs a content swap between columns. This is way easier to deal with than moving a whole chunk of HTML content.
.two-column.reverse {
flex-direction: row-reverse;
}The property flex direction determines what order the elements should appear inside the section. The value row-reverse will flip the elements horizontally.
Finally, attach the class to the section element.
<section class="two-column reverse">
...
</section>Note: Touching less code when making changes means less mistakes 😊
And we get the same result.
So, how would I know how to create an initial HTML markup correctly that I can easily modify using CSS classes?
I would suggest your HTML markup order should look like how it will appear in the mobile layout.
That’s the reason you always want to create the mobile layout first.
I used a desktop to mobile approach in this article for demonstration purposes.
Now, you may think…
Is it mobile friendly at this point?
The answer is no, but it’s very easy to do.
Two Column Mobile Layout
When I squeeze my browser, the layout will look like this…and it’s definitely NOT user friendly.
When the browser screen is less than 600 px , change the two column layout to a single column and stack the columns one below the other.
To do that, let’s add a CSS media query breakpoint block for it.
@media only screen and (max-width: 600px) {
}To change the row into a column, all we have to do is to use flex-direction property and set its value to column.
So the div elements inside the section block sit below instead of beside each other.
@media only screen and (max-width: 600px) {
.two-column, .two-column.reverse {
flex-direction:column;
}
}Believe it or not…
That’s it for mobile layout!
At this stage, the two columns looks great!
What if we want three or more columns down the road.
Let’s see how to create them next.
Recommended (Full-Course)
Build Responsive Real World Websites with HTML5 and CSS3
Three Column Flexbox Layout
As I mentioned earlier, I am going to make the HTML markup order based on how I want the content and image to look on the mobile view.
So, I want the heading first, then paragraph and then the image.
<!-- THREE COLUMN -->
<section class="three-column">
<div>
<h2>No Vaccum SEAL</h2>
<p>Shipped 📦 in a vinyl bag - not vacuum sealed, so it arrives in ready to use <strong>fluffy ☁️</strong>condition! No extra work needed.
</p>
<img src="https://via.placeholder.com/502x302" alt="">
</div>
<div>
<h2>Wrinkle/Fade Resistant</h2>
<p>The durable polyester fabric has a natural resistance to wrinkles and will retain its original color.
</p>
<img src="https://via.placeholder.com/502x302" alt="">
</div>
<div>
<h2>Machine Washable</h2>
<p>Easily cleaned 🧼 with a trip through the washing machine and dryer. Machine wash cold 🥶 separately and tumble dry low. </p>
<img src="https://via.placeholder.com/502x302" alt="">
</div>
</section>Let’s create a three column layout in a single row using Flexbox
.three-column {
display:flex;
}
.three-column div {
flex:1;
border:1px solid;
}And it looks great!
In a desktop view, I want the image to be at the top followed by the title and then the description.
To do that I am going to reverse the order of the elements vertically using flex-direction:column-reverse inside the divs.
.three-column div {
flex:1;
border:1px solid;
display:flex;
flex-direction:column-reverse;
}
That was easy!
But the top alignments of the image are not correct.
To fix that, add justify-content:flex-end; property to the columns div.
.three-column div {
...
justify-content:flex-end;
}
Image alignments are good.
But, the title is below the description.
To keep the title always right above the description, we need to wrap them with the span element similar to what I’ve done with the two column earlier.
<!-- THREE COLUMN -->
<section class="three-column">
<div>
<span>
<h2>No Vaccum SEAL</h2>
<p>Shipped 📦 in a vinyl bag - not vacuum sealed, so it arrives in ready to use <strong>fluffy ☁️</strong>condition! No extra work needed.
</p>
</span>
<img src="https://cdn.shopify.com/s/files/1/0506/3127/8767/files/3PC_Comforter_Bed_In_A_Bag.jpg?v=1612056647" alt="">
</div>
.....
</section>
And it looks exactly like what we want!!!
Recommended (Full-Course)
Web Design for Beginners: Real World Coding in HTML & CSS
Three Column Mobile Layout
Similar to what we have done with the two column layout, we need to change the flex-direction to the column when the screen size is less than 600px.
This will lay each column below instead of beside each other.
@media only screen and (max-width: 600px) {
.three-column {
flex-direction:column;
}
}
This looks nice, but not consistent with the single and two column mobile layouts as they have the title and description right above the image.
To move the title and description above, set flex-direction:column to the column divs as well.
@media only screen and (max-width: 600px) {
.three-column, .three-column div {
flex-direction:column;
}
}Now you can see all the columns are consistant in the mobile view.
Conclusion:
You can see how easy it is to create a responsive multiple column layout without any CSS framework.
You’ve learned how to create:
- Single Column Layout
- Two-Column Flexbox Layout
- Two-Column Reverse Flexbox Layout
- Two-Column Mobile Layout
- Three-Column Flexbox Layout
- Three-Column Mobile Layout
You can download the full source code by clicking the button below.
For more learning about Flexbox, take a look at my recommended course below.