Cara Membuat Column Card Pada Sebuah Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 12, 2021

Di bawah ini kita akan mempelajari cara membuat kartu kolom responsif dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Letakkan empat kolom secara berdampingan */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Hapus margin kiri dan kanan ekstra, karena ada padding */
.row {margin: 0 -5px;}

/* Hapus float setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style untuk counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Responsive Column Cards</h2>
<p>Ubah ukuran jendela browser untuk melihat efeknya.</p>

<div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <h3>Card 2</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 3</h3>
     <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 4</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
</div>

</body>
</html>

Cara Membuat Column Card

Langkah 1) Tambahkan HTML:
Contoh

<div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <h3>Card 2</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 3</h3>
     <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 4</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Letakkan empat kolom secara berdampingan */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Hapus margin kiri dan kanan ekstra, karena ada padding */
.row {margin: 0 -5px;}

/* Hapus float setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style untuk counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}