Belajar CSS Bagian 10 : CSS Display Grid (Panduan Lengkap Layout Dua Dimensi di CSS)

Setelah memahami display: block, inline, flex, kini kita masuk ke level layout paling kuat di CSS, yaitu CSS Grid.

Jika Flexbox fokus satu arah (baris atau kolom),
maka CSS Grid bekerja dua arah sekaligus: baris dan kolom.

Inilah alasan kenapa CSS Grid sangat cocok untuk:

• layout halaman utama

• dashboard

• galeri

• layout kompleks modern

---

Apa Itu Display Grid?

display: grid mengubah sebuah elemen menjadi grid container,
dan semua elemen di dalamnya menjadi grid item.

.container {
  display: grid;
} 

Begitu Grid aktif:

• elemen mengisi area

• layout bisa dibagi kolom dan baris

• pengaturan lebih presisi dibanding Flexbox

---

Grid dengan Satuan fr (Fraction Unit)

Salah satu kekuatan utama CSS Grid adalah satuan fr.

Contoh Dasar

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

Artinya

• Total kolom = 3 bagian

• Kolom pertama = 1 bagian

• Kolom kedua = 2 bagian

📌 Ibaratnya:
Kalau total lebar 600px:

• Kolom 1 ≈ 200px

• Kolom 2 ≈ 400px

---

Grid Template Rows (Baris)

Grid tidak hanya kolom, tapi juga baris.

grid-template-rows: 1fr 3fr 2fr; 

Hasil

• Total = 6 bagian

• Baris 1 = 1/6

• Baris 2 = 3/6

• Baris 3 = 2/6

📌 Grid bekerja vertikal & horizontal sekaligus.

---

Repeat(): Menghindari Penulisan Berulang

Daripada menulis:

grid-template-columns: 1fr 1fr; 

Gunakan:

 grid-template-columns: repeat(2, 1fr); 

📌 Lebih singkat, rapi, dan scalable.

Contoh Lain

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

➡️ 3 kolom dengan ukuran sama besar.

---

Menambahkan Banyak Grid Item (1, 2, 3, dst)

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Dengan Grid aktif:

• elemen otomatis masuk ke sel grid

• urutan mengikuti struktur HTML

---

Grid Template Areas (Fitur Kuat & Visual)

Salah satu fitur paling powerful di CSS Grid adalah
👉 grid-template-areas.

Konsepnya:

Kita memberi nama area, lalu menaruh elemen ke area tersebut.

---

Step 1: Definisikan Area

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

  grid-template-areas:
    "a a"
    "b c"
    "d e";
}

📌 Setiap string = satu baris
📌 Huruf yang sama berarti area yang sama

---

Step 2: Pasangkan Elemen ke Area

 .item1 { grid-area: a; }
.item2 { grid-area: b; }
.item3 { grid-area: c; }
.item4 { grid-area: d; }
.item5 { grid-area: e; }

📌 Area a memakan dua kolom
📌 Area lain satu sel masing-masing

---

Aturan Penting Grid Area (WAJIB TAHU)

❌ Grid area TIDAK boleh berbentuk L

Contoh ❌:

"a ."
"a b"

❌ Tidak valid.

Kenapa?

Karena grid area:

• harus persegi panjang

• hanya bisa:

  • menyamping

  • atau ke bawah

✔️ Valid:

"a a"
"b c"

❌ Tidak valid:

• zig-zag

• huruf terpisah

---

Kenapa Grid Lebih Kuat dari Flexbox?

Aspek	Flexbox	Grid
Arah layout	1 dimensi	2 dimensi
Baris + kolom	❌	✅
Area bernama	❌	✅
Layout halaman	⚠️	✅

📌 Grid = layout besar
📌 Flex = layout komponen

---

Studi Kasus Umum CSS Grid

CSS Grid sangat cocok untuk:

• layout halaman utama

• dashboard admin

• layout artikel

• galeri foto

• area header–sidebar–content–footer

---

Ringkasan Properti CSS Grid Dasar

Properti	Fungsi
display: grid	Aktifkan Grid
grid-template-columns	Atur kolom
grid-template-rows	Atur baris
fr	Pembagian fleksibel
repeat()	Ulang otomatis
grid-template-areas	Layout visual
grid-area	Pasang item

---

Ilustrasi CSS Grid (Visual Pendukung)

 

 

 

4

---

Penutup

CSS Grid adalah alat layout paling kuat di CSS saat ini.
Jika kamu sudah paham:

• Display dasar

• Flexbox

Maka CSS Grid adalah langkah berikutnya yang sangat natural.

Flexbox untuk baris
Grid untuk halaman penuh