How To Create Responsive Column Card Components?

In this beginner level CSS, we will create responsive column card components.

HTML

<div class="card-container">
  <div class="card-component">
    <div class="card">
      <img src="language/1.jpg">
      <div class="card-text">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
           Sed facere architecto sint cupiditate eveniet ut possimus
           quibusdam quis dignissimos pariatur doloribus, tenetur vol
         </p>
         <button>Learn Chinese</button>
       </div>
     </div>
     <div class="card">
       <img src="language/2.jpg">
       <div class="card-text">
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Sed facere architecto sint cupiditate eveniet ut possimus
            quibusdam quis dignissimos pariatur doloribus, tenetur vol
          </p>
          <button>Learn French</button>
        </div>
      </div>
    <div class="card">
      <img src="language/3.jpg">
      <div class="card-text">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
           Sed facere architecto sint cupiditate eveniet ut possimus
           quibusdam quis dignissimos pariatur doloribus, tenetur vol
         </p>
         <button>Learn Italian</button>
       </div>
     </div>
    <div class="card">
      <img src="language/4.jpg">
      <div class="card-text">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
           Sed facere architecto sint cupiditate eveniet ut possimus
           quibusdam quis dignissimos pariatur doloribus, tenetur vol
         </p>
         <button>Learn Japanese</button>
       </div>
     </div>
    <div class="card">
      <img src="language/5.jpg">
      <div class="card-text">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
           Sed facere architecto sint cupiditate eveniet ut possimus
           quibusdam quis dignissimos pariatur doloribus, tenetur vol
         </p>
         <button>Learn Korean</button>
       </div>
     </div>
     <div class="card">
       <img src="language/2.jpg">
       <div class="card-text">
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Sed facere architecto sint cupiditate eveniet ut possimus
            quibusdam quis dignissimos pariatur doloribus, tenetur vol
          </p>
          <button>Learn Spanish</button>
        </div>
    </div>
  </div><!-- End of Card Component-->
</div><!-- End of Card Container -->

Here we have  6 card components.

We will set the cards in 3 column layout and 2 column layout depending on the size of viewport as shown in the diagram below.

Now let’s get our basic CSS first.

html{
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    margin: 0;
    padding: 0;
    background: #8B6875
}

Images used in this project are large therefore I  will give them the max width of 100%.

I have also given other properties to image which are self-explanatory.

img{
    max-width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

Next we will give width to .card-container and horizontally center it.

Since it is the parent container of .card, all the card components will be within the width given below.

.card-container{
    width: 80vw;
    margin: 25px auto;
}

Let’s also style .card, .card-text and button elements.

.card{
    background: #fff;;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-radius: 15px;
}
.card-text p{
    padding: 10px;
}
 button{
    width: 80%;
    display: block;
    margin: 5px auto;
    padding: 10px;
    color: #fff;
    font-size: 16px;
    background: #94D28D;
    border: none;
} 

Responsive Design

Next we will display card component in 2 column layout when the viewport is 480px wide or wider.

If it is less than 480px wide, card components will be displayed in single column.

*Note:  I was able to get single column layout only in Firefox.

@media (min-width:480px){
    .card-component {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;    
    }
    .card{
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: calc(50% - 1rem);
         /* flex: 0 1 calc(50% - 1rem) shorthand  */
    }
}

Finally when the viewport is 768px wide or wider, we will display card components in 3 column layout.

@media (min-width:768px){
    .card{
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: calc(33% - 1rem);
        /* flex: 0 1 calc(33% - 1rem) shorthand */
    }
}

Full CSS Code

html{
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    margin: 0;
    padding: 0;
    background: #8B6875
}
img{
    max-width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.card-container{
    width: 80vw;
    margin: 25px auto;
    border: 2px solid black
}
.card{
    background: #fff;;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-radius: 15px;
}
.card-text p{
    padding: 10px;
}
 button{
    width: 80%;
    display: block;
    margin: 5px auto;
    padding: 10px;
    color: #fff;
    font-size: 16px;
    background: #94D28D;
    border: none;
} 

@media (min-width:480px){
    .card-component {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;    
    }
    .card{
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: calc(50% - 1rem);
         /* flex: 0 1 calc(50% - 1rem) shorthand  */
    }
}

@media (min-width:768px){
    .card{
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: calc(33% - 1rem);
        /* flex: 0 1 calc(33% - 1rem) shorthand */
    }
}