Responsive Four Column Layout with Flexbox

In this post we will create responsive 4 column layout with CSS flexbox.

HTML

<div class="container">
  <div class="card_wrapper">
    <div class="card card_1">
      <div class="circle"></div>
      <h1>SEDANS</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <button>Learn More</button>
    </div>
    <div class="card card_2">
      <div class="circle"></div>
      <h1>SUVS</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <button>Learn More</button>
    </div>
    <div class="card card_3">
      <div class="circle"></div>
      <h1>LUXURY</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <button>Learn More</button>
    </div>
    <div class="card card_4">
      <div class="circle"></div>
      <h1>COUPE</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <button>Learn More</button>
    </div>
  </div>
</div>

CSS

html{   
    box-sizing: border-box; 
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.container{
    max-width: 1200px;
    margin: 90px auto;
}
.card_wrapper{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.card{
    padding: 35px;
    color: #eee
}
.circle{
    width: 50px;
    height: 50px;
    background-color: rgba(15, 15, 15, 0.4);
    border-radius: 50%;
    box-shadow: 15px 0px rgba(15, 15, 15);
}
.card h1{
    color: #fff;
}
.card p{
    line-height: 1.4;
}
.card button{
    width: 80%;
    padding: 12px;
    margin-top: 35px;
    border: none;
    border-radius: 15px;
}
.card_1{
    background-color: #e38525;
}
.card_1 button{
    color: #e38525
}
.card_2{
    background-color: #016871;
}
.card_2 button{
    color: #016871;
}
.card_3{
    background-color: #003f3e;
}
.card_3 button{
    color: #003f3e;
}
.card_4{
    background-color: #3D9397;
}
.card_4 button{
    color: #3D9397
}
@media (min-width: 768px){
    .card_wrapper{
        flex-direction: row;
    }
    .card{
        flex-basis: 50%;
    }
}
@media (min-width: 1200px){
    .card_wrapper{
        flex-wrap: nowrap;
    }
    .card{
        flex-basis: 33.333%;
    }
}