How to create CSS cards?

Issue

This question might be a bit broad. I am trying to create three cards and a bar that is on top of them like this:

Where the orange parts are images and the grey parts are text.

.blue-line {

  height: 100px;

  background-color: lightblue;

  margin-left: 10px;

  margin-right: 10px;

}



.card {

  height: 400px;

  width: 300px;

  background-color: grey;

  margin-left: 10px;

  margin-right: 10px;

  margin-top: 20px;

}

<div class="blue-line"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

Solution

You should use FlexBox, like this :

.blue-line {

  height: 100px;

  background-color: lightblue;

  margin-left: 10px;

  margin-right: 10px;

}



.card {

  height: 400px;

  width: 300px;

  background-color: grey;

  margin-left: 10px;

  margin-right: 10px;

  margin-top: 20px;

}



.card-container {

  margin-left: 10px;

  margin-right: 10px;

  display: flex;

}



.img {

  height: 100px;

  width:100%;

  background: #febe8c;

}

<div class="blue-line"></div>

<div class="card-container">

  <div class="card">

      <div class="img">

      </div>

  </div>

  <div class="card">

      <div class="img">

      </div>

  </div>

  <div class="card">

      <div class="img">

      </div>

  </div>

</div>

---

Containers and items

Initialize flex box

.container {
  display: flex; /* or inline-flex */
}

Order

.item {
  order: <integer>; /* default is 0 */
}

Flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

---

Learn more about Flex Box on css-tricks.com

Sources

Answered By - Pol