Mengenal CSS Grid: Membangun Layout Website Kompleks Tanpa Stres

Halo Sobat Jurnal Coding! Pada artikel sebelumnya, kita sudah bersorak kegirangan karena berhasil menemukan sihir CSS Flexbox. Flexbox sukses menyelamatkan kita dari mimpi buruk mengatur posisi elemen yang hancur berantakan. Namun, mari kita hadapi kenyataan: Flexbox memiliki satu kelemahan bawaan.

Flexbox dirancang untuk mengatur elemen dalam Satu Dimensi saja (hanya menyamping dari kiri ke kanan, ATAU hanya menumpuk dari atas ke bawah). Bagaimana jika bos di kantormu meminta kamu membuat tata letak raksasa seperti beranda YouTube? Ada menu navigasi di sisi kiri, deretan kotak video di area kanan atas, dan bagian komentar panjang di bawahnya. Semuanya harus diatur secara bersamaan dalam bentuk baris mendatar dan kolom menurun.

Jika kamu memaksa menggunakan Flexbox untuk struktur raksasa ini, kodemu akan menjadi sangat panjang dan tumpang tindih. Untuk menyelesaikan desain super kompleks ini, kita harus memanggil "Kakak Tertua" dari Flexbox, yaitu: CSS Grid Layout!

### Analogi Papan Catur dan Rak Telur

Jika Flexbox adalah sebuah tusuk sate (yang hanya bisa menusuk urutan daging dalam satu garis lurus), maka CSS Grid adalah sebuah Papan Catur atau Rak Telur.

Di atas papan catur, kamu memiliki kotak-kotak yang diatur berdasarkan Baris (mendatar) dan Kolom (menurun) secara bersamaan (Sistem Dua Dimensi). Kamu bisa menaruh bidak catur persis di koordinat tertentu dengan sangat presisi, misalnya "Taruh bidak kuda ini di Baris ke-2, Kolom ke-3". CSS Grid bekerja persis seperti ini!

Kamu membagi layar monitormu menjadi beberapa petak gaib di balik layar. Setelah petak-petak itu tercipta, kamu tinggal menugaskan setiap elemen HTML-mu: "Hei Kotak Artikel, kamu tempati petak nomor satu sampai nomor tiga ya! Dan hei Kotak Iklan, kamu duduk manis di petak nomor empat."

### Meracik Mantra CSS Grid

Mari kita lihat betapa elegan dan rapinya penulisan kode CSS Grid ini. Kita akan membuat sebuah galeri foto yang membagi layar menjadi 3 kolom berukuran persis sama rata.

/* Menyiapkan Papan Catur Galeri */

.wadah-galeri {

    display: grid;

    /* Membagi papan menjadi 3 kolom dengan ukuran 1 fraksi (1fr) rata */

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

    /* Memberikan jarak kosong antar petak catur sebesar 20px */

    gap: 20px;

}

Perhatikan satuan ukuran baru bernama "1fr" (Satu Fraksi). Ini adalah ukuran magis milik CSS Grid. Jika kamu menulis 1fr 1fr 1fr, sistem akan membagi sisa layar menjadi 3 bagian yang sangat adil tanpa kamu harus pusing menghitung persentase persisnya secara matematika!

### Kapan Menggunakan Grid, Kapan Menggunakan Flexbox?

Banyak pemula yang sering berdebat di internet: "Mana yang lebih baik, CSS Grid atau Flexbox?"

Perdebatan itu sama konyolnya dengan bertanya: "Mana yang lebih baik, Sendok atau Garpu?" Keduanya adalah alat yang memiliki fungsi berbeda, dan seorang ahli akan menggunakan keduanya secara bersamaan saat sedang makan!

Aturan emas dari Jurnal Coding untuk penataan web profesional:
1. Gunakan CSS Grid untuk mengatur "Struktur Makro" (Kerangka utama website secara keseluruhan, seperti membagi posisi Header, Sidebar Iklan, Konten Utama, dan Footer).
2. Gunakan Flexbox untuk mengatur "Struktur Mikro" (Isi detail di dalam setiap petak komponen, seperti menjejerkan logo ikon dan teks di dalam sebuah tombol).

Kuasai kedua senjata penata letak mutakhir ini, dan kamu akan memiliki kekuatan visual yang tidak tertandingi. Tidak akan ada lagi desain website yang hancur berantakan di layar komputer pengunjungmu!