Responsive CSS Card Layout Using Flexbox , CSS & HTML

In this video, you are going to learn how to design a responsive CSS card layout with different sizes using flexbox. By studying this tutorial you can get basic ideas about how to make a responsive layout using flexbox for a website. There are cards in 3 different sizes. So you can learn how to manage those cards using responsive styles. Let’s see how to design this responsive CSS card layout.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive CSS Card Layout using Flexbox</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <!--card layout start-->
    <div class="container">
      <div class="row">
        <div class="card-01"></div>
        <div class="card-01"></div>
        <div class="card-01"></div>
      </div>
      <div class="row">
        <div class="card-02"></div>
        <div class="card-02"></div>
      </div>
      <div class="row">
        <div class="card-03"></div>
      </div>
    </div>
    <!--card layout end-->

  </body>
</html>

style.css


body{
  margin: 0;
  padding: 0;
  height: 100vh;
}

.container{
  margin: 20px;
}

.row{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.card-01{
  background: #03D29F;
  position: relative;
  flex: 1;
  max-width: 300px;
  height: 150px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.card-02{
  background: #50A7FF;
  position: relative;
  flex: 1;
  max-width: 460px;
  height: 200px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.card-03{
  background: #FF7675;
  position: relative;
  flex: 1;
  max-width: 940px;
  height: 300px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

@media (max-width:800px){
  .card-01{
    flex: 100%;
    max-width: 600px;
  }

  .card-02{
    flex: 100%;
    max-width: 600px;
  }

  .card-03{
    flex: 100%;
    max-width: 600px;
  }
}

#html #css #flexbox