Sejauh ini item ditempatkan otomatis dari kiri ke kanan. Grid menyediakan cara jauh lebih presisi: setiap pembatas antartrack adalah sebuah grid line bernomor, dan kita dapat memerintahkan item untuk memulai serta berakhir pada garis tertentu — bahkan memberi nama pada garis atau kelompok sel. Kemampuan inilah yang membuat grid mampu membangun layout halaman utuh (header, sidebar, konten, footer) tanpa satu pun trik posisi. Chapter ini membahas tiga tingkat penulisan: nomor garis, garis bernama, dan grid area yang menamai blok seluruh sel.

Nomor Grid Line dan Kata Kunci span #

Pada kisi tiga kolom terdapat empat garis kolom: garis 1 di tepi kiri, garis 2 di antara kolom 1 dan 2, dan seterusnya hingga garis 4 di tepi kanan. grid-column dan grid-row menerima pasangan start / end, dan garis pengakhir boleh lebih dari satu track — itulah cara item membentang:

css 
.lebar-dua   { grid-column: 1 / 3; }    /* dari garis 1 ke garis 3: dua kolom */
.sampai-ujung { grid-column: 2 / -1; }   /* garis 2 ke garis terakhir */
.dua-track   { grid-column: span 2; }   /* membentang dua track dari posisi auto */

Nomor negatif menghitung dari tepi akhir: -1 selalu berarti garis terakhir. Kata kunci span N menyatakan berapa track yang dibentang tanpa peduli nomor garisnya — bentuk ini praktis untuk item yang ukurannya ditentukan “berapa kolom”, bukan “di kolom mana”.

Garis Bernama dan Grid Area #

Deklarasi track boleh disertai nama garis di dalam tanda kurung siku: [utama-start] 1fr [utama-end]. Nama tersebut lalu dapat dipakai sebagai nilai grid-column/grid-row, sehingga template yang berubah tidak merusak penempatan item. Satu garis boleh memakai beberapa nama sekaligus — pola [kiri-end tengah-start] memberi dua nama untuk garis yang sama, bergaya penamaan ganda dari sistem BEM.

Tingkat tertinggi adalah grid-template-areas : kita menggambar denah kisi dengan string bernama, lalu setiap item menempati area lewat grid-area :

css 
.halaman {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 60px 100px 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.footer  { grid-area: footer; }

Aturan yang wajib dipatuhi: bentuk setiap area harus persegi panjang, string tiap baris harus memuat jumlah kolom yang sama, dan nama yang ditulis lebih dari sekali membentuk satu area yang tersambung. Bila aturan ini dilanggar, deklarasi grid-template-areas diabaikan seluruhnya. Bentuk lengkap grid-area menerima empat garis sekaligus dengan urutan row-start / column-start / row-end / column-end — perhatikan bahwa urutannya baris dulu, berbeda dari kebiasaan menulis kolom lebih dulu.

Denah area juga memperkaya kisi dengan garis implisit: setiap nama pada grid-template-areas otomatis menghasilkan pasangan garis header-start/header-end dan seterusnya, sehingga item lain dapat merujuk grid-column: header-start / header-end tanpa menghitung nomor. Konvensi akhiran -start dan -end inilah alasan penamaan garis manual pada contoh demo memakai pola yang sama — dua mekanisme itu saling terhubung dan dapat dicampur dalam satu kisi.

Berikut HTML yang dipakai demo chapter ini:

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Grid Lines dan Grid Areas</title>
  <style>
    .kisi-garis { display: grid; width: max-content; grid-template-columns: 150px 150px 150px; }
    .bentang    { grid-column: 1 / 3; }
    .kisi-nama  { display: grid; width: max-content;
                  grid-template-columns: [kiri-start] 150px [kiri-end tengah-start] 150px [tengah-end]; }
    .kiri-ke-tengah { grid-column: kiri-start / tengah-end; }
    .halaman { display: grid; width: 500px;
               grid-template-columns: 150px 1fr;
               grid-template-rows: 60px 100px 50px;
               grid-template-areas:
                 "header header"
                 "sidebar main"
                 "footer footer"; }
    .header  { grid-area: header; }
    .sidebar { grid-area: sidebar; }
    .footer  { grid-area: footer; }
  </style>
</head>
<body>
  <div class="kisi-garis">
    <div class="bentang">Garis 1 / 3</div>
    <div>Kolom 3</div>
  </div>
  <div class="kisi-nama">
    <div class="kiri-ke-tengah">kiri-start ke tengah-end</div>
  </div>
  <div class="halaman">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div>Main</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Hasil di Browser:

text 
Kisi pertama: item dengan grid-column: 1 / 3 membentang dua kolom
150px, sehingga computed width 300px dan computed grid-column "1 / 3".
Kisi kedua: item dengan garis bernama kiri-start / tengah-end juga
selebar 300px.
Kisi denah: header membentang dua kolom sehingga computed width 500px
dan height 60px; sidebar mengikuti kolom pertama selebar 150px; footer
pada baris ketiga setinggi 50px.

Mari kita telaah tiga deklarasi pentingnya:

  1. Baris 8 (.bentang): nilai 1 / 3 tidak berarti “kolom 1 dan 3”, melainkan “mulai di garis 1, berhenti di garis 3” — hasilnya dua kolom penuh (300px).
  2. Baris 11–12 (.kisi-nama): garis tengah diberi dua nama sekaligus. Item memakai pasangan kiri-start / tengah-end sehingga pembacaan templatenya seperti kalimat: dari tepi kiri hingga tepi tengah.
  3. Baris 13–22 (.halaman): denah tiga baris dengan header dan footer membentang dua kolom. Browser menempatkan setiap item tepat pada area bernamanya tanpa deklarasi grid-column terpisah.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi lebar bentangan garis (300px), lebar bentangan garis bernama (300px), serta ukuran header, sidebar, dan footer pada denah area.