[MB]

Build a 3 column pricing plan layout with CSS flexbox

Last modified on August 28th 2020 GitHub [Source] CodePen [Demo]

Pricing components are a common feature on websites that offer different plans with monthly billing.

In this example we’ll be building a responsive 3 panel layout using CSS flexbox.

Flexbox Pricing Panel Layout

Let’s get started with the HTML.

Flexbox layouts need a flex container (pricing) and flex items (pricing-plan) to function correctly.

<div class="pricing"> <div class="pricing-plan"> <h2>Basic</h2> <p><span>$3.95</span> / month</p> <ul> <li>1 Website</li> <li>1GB Storage</li> <li>Unlimited Bandwidth</li> <li>24/7 Support</li> </ul> <a href="#">Sign up</a> </div> <div class="pricing-plan"> <h2>Premium</h2> <p><span>$16.95</span> / month</p> <ul> <li>10 Websites</li> <li>10GB Storage</li> <li>Unlimited Bandwidth</li> <li>24/7 Support</li> </ul> <a href="#">Sign up</a> </div> <div class="pricing-plan"> <h2>Advanced</h2> <p><span>$27.50</span> / month</p> <ul> <li>Unlimited Websites</li> <li>Unlimited Storage</li> <li>Unlimted Bandwidth</li> <li>24/7 Support</li> </ul> <a href="#">Sign up</a> </div> </div>

Next we’ll add the CSS that’ll give us our 3 column flexible layout.

.pricing { display: flex; justify-content: space-between; max-width: 960px; margin: auto; } .pricing-plan { flex: 1; background-color: #1f262c; margin: 15px 8px; padding: 30px; border-radius: 6px; color: #fff; }

So the plans aren’t squished on mobile devices we’ll switch to a single column layout with the following:

@media (max-width: 768px) { .pricing { display: block; } }

You could now add or remove a <div class=”pricing-plan”></div> and the layout will adjust accordingly.

Lastly we can add some style so the headings, text and links all look nice.

.pricing-plan h2 { margin-top: 0; padding-bottom: 10px; border-bottom: 2px solid #e30046; text-transform: uppercase; letter-spacing: 0.07em; } .pricing-plan p { margin-top: 0; } .pricing-plan p span { font-size: 33px; } .pricing-plan ul { margin: 0 0 35px; padding-left: 16px; list-style: none; line-height: 1.8; color: #b5b5b5; } .pricing-plan ul li::before { content: "•"; color: #e30046; display: inline-block; width: 20px; margin-left: -15px; position: relative; top: 4px; font-size: 26px; line-height: 0; } .pricing-plan a { text-decoration: none; color: #fff; padding: 10px 20px; text-align: center; background: #e30046; border: 2px solid #e30046; border-radius: 5px; letter-spacing: 0.05em; text-transform: uppercase; font-size: 15px; font-weight: bold; } .pricing-plan a:hover { background-color: #1f262c; }

If this was your first time using flexbox hopefully you can now start incorporating it in other components.