Kombinasikan flex-wrap: wrap; dengan flex: 1 1 250px; untuk tata letak kartu yang sepenuhnya responsif tanpa media query!
Flex Responsive
Contoh Kode Flex Responsive:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-kartu {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-family: sans-serif;
}
.kartu {
flex: 1 1 200px;
background: white;
border: 1px solid #cbd5e1;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
</style>
</head>
<body>
<div class="grid-kartu">
<div class="kartu"><h4>Modul 1</h4><p>Dasar Pemrograman</p></div>
<div class="kartu"><h4>Modul 2</h4><p>Struktur Algoritma</p></div>
<div class="kartu"><h4>Modul 3</h4><p>Proyek Akhir</p></div>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS Flex Responsive mengubah tampilan elemen di atas.