Pertemuan 9-10: Layouting dengan Grid

Membangun Layout Dua Dimensi yang Kompleks

Pengertian

CSS Grid Layout adalah sistem layout dua dimensi (terdiri dari baris dan kolom), yang membuatnya lebih mudah untuk merancang item-item ke dalam sebuah grid. Tidak seperti Flexbox yang lebih cocok untuk layout satu dimensi (baik baris atau kolom), Grid unggul dalam membuat layout halaman yang kompleks secara keseluruhan, di mana Anda perlu mengontrol penempatan elemen di kedua sumbu secara bersamaan.

Analogi

Analogi: Papan Catur atau Spreadsheet
Bayangkan sebuah papan catur atau lembar kerja Excel. Anda memiliki baris dan kolom yang jelas. Dengan CSS Grid, Anda bisa menempatkan sebuah item untuk menempati sel dari kolom 1 hingga kolom 3, atau dari baris 2 hingga baris 4. Ini memberikan kontrol yang sangat presisi atas penempatan elemen, sesuatu yang sulit dilakukan dengan metode layout lain.

Contoh Kode & Hasil

1. Membuat Grid Container Sederhana

Mendefinisikan grid dengan 3 kolom dan 2 baris.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 80px;
  gap: 10px; /* Jarak antar item */
}

2. Mengatur Ukuran Kolom dengan Satuan fr

Satuan fr (fraction) merepresentasikan satu bagian dari ruang yang tersedia di grid container.

1fr
2fr
.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Kolom kedua 2x lebih lebar */
}

3. Merentangkan Item (Spanning)

Membuat satu item menempati lebih dari satu kolom atau baris.

Item 1 (Lebar 2 Kolom)
Item 2
Item 3
Item 4 (Lebar 3 Kolom)
.item-1 {
  grid-column: 1 / 3; /* Mulai dari garis kolom 1, berakhir sebelum garis 3 */
}
.item-4 {
  grid-column: 1 / 4; /* Mulai dari garis kolom 1, berakhir sebelum garis 4 */
}

4. Menamai Area Grid (grid-template-areas)

Cara yang sangat intuitif untuk membuat layout halaman.

Header
Sidebar
Main
Footer
.container {
  display: grid;
  grid-template-areas:
    'header header'
     'sidebar main'
     'footer footer';
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Latihan Mandiri

Tugas: Membuat Layout Galeri Gambar

  1. Buat sebuah <div> sebagai grid container.
  2. Atur agar container memiliki 3 kolom dengan lebar yang sama (1fr 1fr 1fr) dan beri jarak (gap) antar item.
  3. Masukkan 5 buah elemen <img> di dalamnya.
  4. Buat gambar pertama (item 1) merentang selebar 2 kolom (grid-column: span 2;).
  5. Buat gambar terakhir (item 5) merentang selebar 2 kolom juga.

Kesimpulan

CSS Grid adalah sistem layout paling kuat yang tersedia di CSS saat ini. Ia dirancang untuk layout halaman utama yang kompleks, sementara Flexbox lebih cocok untuk komponen di dalamnya. Dengan memahami cara mendefinisikan kolom, baris, dan menempatkan item di dalamnya, Anda dapat membuat hampir semua jenis tata letak web dengan kode yang bersih dan logis.