Unit pecahan 1fr (fraction) membagi ruang kontainer secara proporsional. repeat(3, 1fr) membuat 3 kolom sama lebar.
Grid Container
Contoh Kode Grid Container:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-kolom {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
font-family: sans-serif;
}
.kolom-item {
background: #e0f2fe;
color: #0369a1;
padding: 25px;
text-align: center;
border-radius: 8px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid-kolom">
<div class="kolom-item">Kolom 1 (1fr)</div>
<div class="kolom-item">Kolom 2 (1fr)</div>
<div class="kolom-item">Kolom 3 (1fr)</div>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS Grid Container mengubah tampilan elemen di atas.