Tutorial kali ini akan membahas bagaimana membuat grid responsive dengan menggunakan css tanpa framework.
Langsung saja ke kode dibawah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid Responsive</title>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.grid {
background-color: #20262e;
color: #fff;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="grid">A</div>
<div class="grid">B</div>
<div class="grid">C</div>
<div class="grid">D</div>
<div class="grid">E</div>
<div class="grid">F</div>
</div>
</body>
</html>Kita menggunakan fitur grid dari css,yang diatur template-columns untuk otomatis.Kita atur ketika layar diresize ,setiap item lebih kecil dari 200px akan otomatis menyesuaikan grid.
Fungsi repeat digunakan agar ukuran setiap item sama,auto-fit berguna untuk menghandle ukuran item menyesuaikan dengan ukuran browser,jadi tidak ada overflow.minmax(200px,1fr) artinya kita membuat minimal ukuran 200px dan max 1fr,dengan 1fr sebagai nilai max ,space yang tersisa dari browser akan dijadikan nilai max ,ini yang membuat grid juga menjadi responsive karena ukuran max dinamis.