Make a Pricing Table Using CSS Flexbox

What first comes to mind?

Let's be honest. When ever you see something like this in a 3 column layout, what first come to your mind? CSS grid! oh no, maybe Bootstrap, materialize or probably Bulma. etc.

And why not? I would say the same, after all achieving a result like this is as easy as adding water into a cup, you only need to add the classname col and that's all. Job done!

However I've always find flexbox quite easy to work with, you know that kind of feeling you get when you know you won't be loading any external library or floating and clearfixing. We're going to achieve the same result using flexbox and also make it responsive with media query and the flexbox property (flex-direction) . oh shit! I just said the best part.

If you've never used flexbox before or probably never heard of it. This is not a Flexbox absolute beginner tutorial, however this article still covers some of the fundamentals you'll need to start using flexbox.

Let's get started . . .

The Setup

We going to start with the markup, I'll try to make the markup understandable as possible as I can.

Starting with the container class

    
    .container{
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
        padding-top: 70px;
    }
    

The container class

We're only concern with the justify-content property, you probably know what the display:flex property does. In case you're not familiar with it, it basically expands items to fill available free space, or shrinks them to prevent overflow. We set justify-content: to space-between because we want to set the price-card classe width to 30%, then the remaining 10% will be distributed among them, in other get that space between them.

Like this:

The price-card class

    
    .price-card{
        height: 100%;
        background-color: #fff;
        flex-basis: 30%;
        box-sizing: border-box;
        margin-bottom: 40px;
     }
    

As you can see I use the flex-basis: property instead of width. Well I just want to be more flexboxish

The top Class

    
    .top{
        text-align: center;
        transform: translateY(-20px);
        padding: 10px 0;
        border-radius: 10px 10px 0 0;
     }
    

Changing the background-color for each plan

    
    .price-card .basic{
        background: #2ECC71;
    }
    .price-card .standard{
        background: #222;
        border-bottom: 1px solid INDIANRED;
    }
    .price-card .premium{
        background: #F4D03F;
    }
    

top class children: h3, p & span

    
    .top h3{
        color: #fff;
        font-size: 1.5rem;
        text-transform: uppercase;
        font-weight: 400;
    }

    .standard p{
        color: INDIANRED;
        word-spacing: 2px;
    }
     .standard span{
        color: #9f9f9f;
     }

    

The ul & li

    
    ul{
        padding: 0px;
    }
    ul li{
        list-style: none;
        text-align: center;
        padding: 20px 0;;
    }
    

The bottom section

Let's style the button tag globally

    
    button{
        color: white;
        border: none;
        font-size: 12px;
        padding: 10px 20px;
        border-radius: 20px;
        text-transform: uppercase;
        cursor: pointer;
    }
    
 

You see that line at the bottom of the card each with different color

     
/* basic */
    .order-now-basic{
        text-align: center;
        padding: 30px 0;
        border-bottom: 2px solid #2ECC71;
     }

/* standard */
     .order-now-standard{
        text-align: center;
        padding: 30px 0;
        border-bottom: 2px solid INDIANRED;
      }

/* premium */
.order-now-premium{
    text-align: center;
    padding: 30px 0;
    border-bottom: 2px solid #F4D03F;
  }

     
 

Let's give the buttons different background-color, notice that I didn't set a background-color to the buttons when I styled them that's because I want them all to have that global style but different background-color.

    
    .btn-basic{
        background-color: #2ECC71;
     }

     .btn-standard{
        background-color: INDIANRED;
      }

      .btn-premium{
        background-color: #F4D03F;
      }

    

Making it responsive

It seems kinda scary at first when you hear responsive, but in reality it's dead simple.

    
    @media (max-width:900px) {
        .container{
            flex-direction: column;
        }
    }
    

Just few lines of code and you're done.