Grid Container dan Grid Items

Layout dua dimensi — kolom dan baris sekaligus — selama ini kita rangkai dengan trik float, tabel, atau kombinasi flexbox bersarang. CSS Grid menyelesaikan masalah tersebut lewat satu pernyataan: elemen yang diberi display: grid langsung menjadi wadah kisi yang mengatur semua anaknya dalam baris dan kolom. Pada Chapter ini kita mengenal dua peran utama dalam Grid, yaitu grid container sebagai pembentuk kisi dan grid items sebagai pengisinya, lalu melihat baris implicit yang terbentuk sendiri ketika jumlah item melebihi rencana awal. Konsep ini adalah fondasi seluruh section Grid, sehingga sebaiknya dipahami sebelum masuk ke pengukuran track pada Chapter berikutnya.

Menetapkan Grid Container #

Peran grid container dimulai dari satu deklarasi: display: grid. Setelah deklarasi ini aktif, browser membentuk grid formatting context pada elemen tersebut — mirip bagaimana display: flex membentuk flex formatting context pada Chapter Flexbox, tetapi dengan kisi dua dimensi.

Nilai grid membuat container berperilaku seperti elemen block: memenuhi lebar induknya. Bila Anda ingin kisi yang lebarnya menyesuaikan isi, gunakan display: inline-grid sehingga container berperilaku seperti elemen inline. Dua nilai ini hanya memengaruhi cara container berinteraksi dengan elemen di sekitarnya; perilaku internal kisi tetap identik.

Dokumentasi lengkap properti ini ada di MDN: display dan panduan MDN: Basic concepts of grid layout .

Anak Container Menjadi Grid Items #

Setiap anak langsung dari grid container otomatis menjadi grid item. Tidak ada properti tambahan yang perlu ditulis pada anak-anak tersebut — keanggotaan dalam kisi ditentukan oleh hubungan DOM, bukan oleh class. Aturan ini berlaku untuk semua jenis elemen: <div>, <span>, <p>, bahkan teks yang telanjang dikelilingi tag akan dibungkus menjadi anonymous grid item.

Perubahan penting terjadi pada tampilan anak yang bersifat inline. Grid item mengalami blockification: nilai display inline seperti inline atau inline-block dipaksa menjadi versi block-nya (block), karena item harus mengisi area kisi sebagai kotak utuh. Anda dapat memeriksanya lewat DevTools: sebuah <span> di dalam grid container melapor computed display: block.

Baris Implicit dan grid-auto-rows #

Bila kita tidak mendeklarasikan grid-template-columns sama sekali, container tetap membentuk kisi: satu kolom implicit yang lebarnya di-stretch memenuhi container, dan setiap anak menumpuk di barisnya sendiri. Perilaku ini mirip daftar vertikal biasa, tetapi item-itemnya kini tunduk pada aturan kisi — termasuk gap, alignment, dan penempatan yang dibahas pada chapter-chapter berikutnya.

Baris yang dideklarasikan lewat grid-template-rows disebut baris eksplisit. Baris yang terbentuk karena item melebihi rencana disebut baris implicit, dan ukurannya dikendalikan properti grid-auto-rows . Nilai bawaannya auto, artinya baris mengikuti tinggi konten; kita dapat menetapkan ukuran tetap seperti grid-auto-rows: 60px agar semua baris tambahan seragam.

Berikut HTML yang dipakai demo chapter ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Grid Container dan Grid Items</title>
  <style>
    .rak-lebar {
      display: grid;
      width: 360px;
    }
    .rak-baris {
      display: grid;
      width: 300px;
      grid-template-columns: 100px 100px;
      grid-auto-rows: 60px;
    }
    .rak-lebar > span {
      border: 1px solid rgb(59, 130, 246);
      background: rgb(219, 234, 254);
    }
    .rak-baris > div {
      border: 1px solid rgb(22, 163, 74);
      background: rgb(220, 252, 231);
    }
  </style>
</head>
<body>
  <div class="rak-lebar">
    <span>Satu</span>
    <span>Dua</span>
  </div>
  <div class="rak-baris">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
</body>
</html>

Mari kita telaah aturan pada blok <style> baris demi baris:

1. Baris 7–8 (.rak-lebar): elemen div ini menjadi grid container tanpa deklarasi track sama sekali. Browser menyediakan satu kolom implicit yang di-stretch memenuhi lebar 360px, dan setiap anak menumpuk pada barisnya sendiri.
2. Baris 13–16 (.rak-baris): container kedua mendeklarasikan dua kolom eksplisit selebar 100px, tetapi tidak mendeklarasikan baris apa pun. Lima item akan terbagi ke tiga baris implicit dengan tinggi 60px karena grid-auto-rows: 60px.
3. Baris 17–19 (.rak-lebar > span): selector menunjuk anak <span> dari container. Di dalam grid, span tersebut diblokifikasi sehingga computed display-nya menjadi block, dan lebarnya mengikuti kolom (360px).

Hasil di Browser:

Rak pertama (tanpa grid-template-columns): dua span menumpuk pada satu
kolom selebar wadah. Computed display wadah: grid; computed display
span anak: block; computed width span: 360px.
Rak kedua (dua kolom 100px, grid-auto-rows 60px): lima item tersusun
dalam tiga baris implicit seragam. Item kelima menempati baris ketiga
dan memiliki computed height 60px.

Demo chapter ini memuat penanda uji otomatis (data-expected) yang memverifikasi nilai-nilai di atas: display: grid pada container, display: block dan lebar 360px pada span hasil blokifikasi, serta tinggi 60px pada item di baris implicit ketiga.