BAB 13 – CSS GRID

Bydeka Juni 15, 2026

Pengertian

CSS Grid digunakan untuk membuat layout dua dimensi.

Sangat cocok untuk:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
}

1 2
3 4

grid-template-columns:
1fr 1fr 1fr;

gap:20px;

.grid{
    display:grid;
    grid-template-columns:
    repeat(3,1fr);

    gap:20px;
}

Buat galeri foto:

Buat halaman produk UMKM:

Ditampilkan menggunakan Grid.