Pengenalan CSS Grid

Selama belajar Flexbox, kita menyusun elemen dalam satu arah pada satu waktu: berjajar mendatar atau bertumpuk vertikal. Begitu desain menuntut baris dan kolom yang rata sekaligus — galeri foto, katalog produk, dasbor — Flexbox mulai kekurangan alat. CSS Grid hadir untuk situasi tersebut: sistem layout dua dimensi yang mengatur baris dan kolom di dalam satu container. Pada chapter ini kita mengenal apa itu Grid, masalah apa yang diselesaikannya, sejarah singkatnya, serta peta lengkap section yang sedang kita mulai.

Layout Dua Dimensi dalam Satu Container #

Kekuatan utama Flexbox justru menjadi batasnya: properti seperti flex-direction memilih satu sumbu, dan meskipun flex-wrap memindahkan item ke baris baru, setiap baris membagi ruang secara independen. Akibatnya kartu pada baris pertama tidak otomatis lurus dengan kartu pada baris kedua. CSS Grid menyelesaikan ini dengan cara berbeda: kita mendefinisikan grid kolom dan baris terlebih dahulu, lalu setiap elemen anak menempati perpotongan yang disebut cell. Karena semua item berbagi track yang sama, perataan antarbaris terjadi otomatis.

.galeri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

Markup galerinya sengaja polos, hanya enam div bernomor:

<div class="galeri-demo">
  <div class="ubin">1</div>
  <div class="ubin">2</div>
  <div class="ubin">3</div>
  <div class="ubin">4</div>
  <div class="ubin">5</div>
  <div class="ubin">6</div>
</div>

Demo berikut menunjukkan efeknya: seluruh susunan dua baris kali tiga kolom berasal dari CSS di atas.

Perhatikan bahwa kita tidak pernah menyentuh posisi tiap ubin — cukup mendefinisikan grid-nya, dan penempatan berurutan terjadi dengan sendirinya.

Dua sistem ini bukan pesaing yang saling menggantikan. Website nyata memakai keduanya: Grid untuk kerangka besar halaman, Flexbox untuk mengatur isi di dalam setiap komponen.

Cara berpikir saat menulis Grid juga berbeda. Pada Flexbox kita sering merancang dari isi ke luar: item mengambil ukurannya, lalu container menyesuaikan. Pada Grid kebalikannya lazim: gambar papan berpetak terlebih dahulu — berapa kolom, berapa baris, mana yang lebar — lalu taruh konten ke petaknya. Perubahan pola pikir ini akan terasa pada dua chapter berikutnya, saat kita mulai mendefinisikan track secara eksplisit.

Jejak Sejarah Singkat #

Usulan layout grid di W3C mulai dibahas serius sekitar tahun 2011, jauh setelah Flexbox, dan perancangannya melalui banyak perubahan sebelum stabil. Titik baliknya terjadi pada tahun 2017: untuk pertama kalinya sebuah fitur CSS besar diimplementasikan hampir serentak oleh seluruh browser utama, sehingga pengembang tidak lagi menghabiskan waktu dengan vendor prefix. Kini Grid berstatus widely available — didukung seluruh browser modern — dan bisa kita pakai sebagai materi inti tanpa keraguan.

Peta Perjalanan Section Ini #

Section CSS Grid terbagi menjadi dua bagian. Bagian pertama (yang sedang kita jalani) membangun fondasi dari nol:

• Struktur dasar: grid container dan grid items beserta kosakata line, track, cell, dan area.
• Mendefinisikan grid: grid-template-columns dan grid-template-rows, satuan fr, fungsi repeat() dan minmax().
• Grid yang beradaptasi: auto-fill dan auto-fit untuk kisi kartu responsif.
• Polesan: gap dan keluarga properti alignment.

Bagian kedua menaikkan levelnya: penempatan eksplisit item dengan grid-column dan grid-row, denah layout lewat grid-template-areas, implicit grid, nested grid, hingga pola jadi seperti kisi kartu responsif, layout sidebar, dan dasbor — ditutup dengan chapter Memilih Grid yang membandingkan Grid dengan Flexbox secara menyeluruh.

Ringkasan #

CSS Grid adalah sistem layout dua dimensi: kita mendefinisikan baris dan kolom dalam satu container, dan setiap elemen anak menempati sel yang perataannya terjamin di kedua sumbu. Grid melengkapi — bukan menggantikan — Flexbox yang bekerja satu dimensi. Setelah fitur ini stabil di semua browser utama sejak 2017, tidak ada alasan menunda mempelajarinya. Chapter berikutnya kita bedah dua peran utama dalam Grid: siapa yang disebut grid container dan siapa yang disebut grid items.