Gunakan grid-column: span 2; untuk membuat elemen membentang selebar 2 kolom.
Grid Items
Contoh Kode Grid Items:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-span {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
font-family: sans-serif;
}
.item-lebar {
grid-column: span 2;
background: #0d2e5c;
color: white;
padding: 20px;
text-align: center;
border-radius: 6px;
}
.item-biasa {
background: #fca311;
color: #0d2e5c;
padding: 20px;
text-align: center;
border-radius: 6px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid-span">
<div class="item-lebar">Membentang 2 Kolom</div>
<div class="item-biasa">1 Kolom</div>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS Grid Items mengubah tampilan elemen di atas.