Cara Membuat Card Responsive Dengan HTML & CSS

Restu Kersana
12 Feb, 2023

Sedang membuat card dengan HTML & CSS tapi tidak responsive ? Kamu bisa temukan cara membuat card responsive dengan HTML & CSS di infokuy. 

Beragam cara untuk membuat card responsive, salah satunya kamu bisa menggunakan Grid CSS.

Nah pada tutorial membuat card responsive ini, saya akan menggunakan Grid CSS untuk membuat cardnya agar responsive. 

Ada beberapa properti css wajib yang akan kamu gunakan dalam membuat card agar bisa responsive, diantaranya :

  • grid
  • grid-template-columns
  • grid-column

Disamping itu, masih banyak properti css yang akan saya gunakan agar cardnya bisa responsive. 

Card memang sering digunakan untuk berbagai hal, misalnya untuk membuat list postingan, profile, menu dan masih banyak lagi

Oh iya, sebelumnya saya sudah membagikan cara membuat modal responsive dengan HTML, CSS, dan Javascript. 

Bagi kamu yang ingin belajar membuat modal tanpa bantuan framework, tutorial yang saya bagikan ini akan sangat membantu.

Baca Juga : Cara Membuat Form Login Menarik Dengan HTML & CSS

Langsung saja ikuti cara membuat card responsive dengan HTML & CSS versi infokuy, berikut penjelasan lebih lengkapnya.

Cara Membuat Card Responsive Dengan HTML & CSS

Kedepannya, saya akan terus membagikan trik seputar CSS dalam pembuatan sebuah komponen baik card, menu, sidebar, navbar, dan komponen lainnya menggunakan HTML, CSS & Javascript. 

Sebelum masuk ke pembuatan card responsivenya, siapkan terlebih dahulu file projectnya. Untuk penamaan file project, kamu bisa mengikuti seperti dibawah atau sesuai keinginan kamu.

  • HTML = index.html
  • CSS = style.css
  • Asset = bisa kamu download disini jika ingin sesuai contoh.

Jika file project nya sudah dibuat, silahkan buka file index.html dan masukkan script di bawah ini. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Responsive</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="card">
       <div class="head-card">
      <img src="1.jpg" alt="">
       </div>
       <div class="body-card">
      <h1>The Forest</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad repudiandae fuga facilis dicta fugiat voluptates deleniti libero earum sed aliquid. </p>
      <svg class="w-6 h-6" fill="none" stroke="#303030" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
       </div>
  </div>
  <div class="card">
     <div class="head-card">
         <img src="2.jpg" alt="">
     </div>
     <div class="body-card">
    <h1>Forest 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad repudiandae fuga facilis dicta fugiat voluptates deleniti libero earum sed aliquid. </p>
    <svg class="w-6 h-6" fill="none" stroke="#303030" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
     </div>
  </div>  
  <div class="card">
     <div class="head-card">
    <img src="3.jpg" alt="">
     </div>
     <div class="body-card">
    <h1>Moonlight</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad repudiandae fuga facilis dicta fugiat voluptates deleniti libero earum sed aliquid. </p>
    <svg class="w-6 h-6" fill="none" stroke="#303030" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
      </div>
  </div>  
  <div class="card">
    <div class="head-card">
       <img src="3.jpg" alt="">
     </div>
     <div class="body-card">
        <h1>Moonlight</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad repudiandae fuga facilis dicta fugiat voluptates deleniti libero earum sed aliquid. </p>
        <svg class="w-6 h-6" fill="none" stroke="#303030" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
     </div>
  </div>
 </div>
</body>
</html>

Selanjutnya masuk ke file css nya, tambahkan script seperti dibawah ini. 

body {
  margin: 30px 0 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  padding: 0;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8,1fr);
  margin: 5px 15px;
  gap:20px;
  position: relative;
}

.card {
  width: 100%;
  height: auto;
  grid-column: span 8;
  margin: 10px 0;
  border-radius: 15px;
  position: relative;
  box-shadow: 0 10px 10px rgba(0,0,0,.1);

}

.head-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.body-card {
  padding: 10px 15px;
}

.body-card h1 {
  margin: 0;  

}

.body-card svg {
  width: 31px;
  position: absolute;
  bottom: 7px;
  right: 20px;
}


@media screen and (min-width: 550px) {
  .card {
  grid-column: span 4;

}


@media screen and (min-width: 760px) {

  .card {
  width: 350px;
  margin: 0 10px;
}

@media screen and (min-width: 960px) {

}

Baca Juga : Cara Membuat Bottom Navbar Dengan HTML dan CSS

Penjelasan :

Pembuatan Card Responsve ini saya menggunakan Grid CSS. Untuk struktur HTML nya bisa kamu lihat copy diatas. Penggunaan Grid CSS perlu tag pembungkus dan parent (anak) yang ingin kamu atur posisinya agar responsive.

Dalam kasus yang saya buat, class container menjadi pembungkus dari class card nya. Dalam class container perlu menambahkan css, berikut ini :

  • display : grid
  • grid-template-columns : repeat(8, 1fr)

Apa maksud dari properti css diatas ? class pembungkus harus diubah displaynya menjadi Grid. Pada awalnya class container memiliki display block, agar parentnya bisa responsive harus menggunakan properti Grid CSS.

Baca Juga : 10 Hosting Web Statis Terbaik dan Gratis

Untuk grid-template-columns sendiri digunakan untuk menentukan ukuran kolom yang akan diisi oleh class parentnya. 

Saya atur untuk class container memiliki kolom sebanyak 8, untuk ukuran kolom sendiri bisa kamu atur dari 1 - 12. Untuk memudahkan saya ambil 8 saja.

Apa maksud dari 8 kolom tadi ? Hal ini akan berfungsi ketika akan meresponsive kan cardnya. Dalam class cardnya, kamu harus menambahkan properti grid-column. Dalam versi mobile agar tampilannya bisa seperti contoh dibawah ini, harus menambahkan grid-column : span 8. 

Ketika masuk ke ukuran tablet dan dekstop, kamu bisa merubah grid-columnnya menjadi span 4. Lihat perbedaannya ketika menggunakan grid-column : span 4. 

Kamu bisa mengatur properti css nya dalam @media screen and (min-width : 760px) untuk ukuran tablet dan @media screen and (min-width : 960px) untuk ukuran desktop. 

Penggunaan @media screen ini sebenarnya bisa kamu atur sesuai kebutuhan dan design yang akan dibuat.

Baca Juga : Cara Hosting Ke Netlify, Gak Pake Lama

Penutup

Berikut pembahasan mengenai cara membuat card responsive dengan HTML & CSS. Bagaimana menurut kamu mengenai cara pembuatan card responsive ini, apakah sangat membantu ? 

Silahkan jika ingin request pembuatan komponen menggunakan CSS, saya akan membuatnya sebisa mungkin.

Baca Juga : 5 Website Box Shadow CSS Generator Terbaik

Terimakasih telah berkunjung ke infokuy, nantikan artikel menarik lainnya seputar Trik CSS hanya di infokuy.

Restu Kersana

Restu Kersana

Calon Jenazah, pengen hidup enak tapi gini - gini aja.

Next Post Previous Post
No Comment
Add Comment
comment url