Build a 3 column pricing table layout with CSS flexbox

Pricing tables are a common feature on websites that offer different plans with monthly billing. In this tutorial we’ll be building a responsive 3 panel pricing table using CSS flexbox.

Let’s get started with the HTML. Flexbox layouts need a parent flex container (pricing) and child flex items (pricing-plan) to function correctly. Here is the markup for a three column layout but you could easily add or remove a flex item and the layout will adjust accordingly:

<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>Code language: HTML, XML (xml)

Next for the CSS that’ll give us our 3 column 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;
}Code language: CSS (css)

As 3 columns is a little too much to display on mobile devices so we’ll switch to a single column layout by converting the pricing div to display as a block element instead of a flex element:

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

Lastly we can add some CSS so the headings, text and links all look good:

.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;
}Code language: CSS (css)

If this was your first time using flexbox hopefully you’ll now be able to start using it to layout other components. As you’ve seen it really does make multi-column layouts easier to build. To learn more about flexbox CSS Tricks has a nice visual guide that can be found here.