Grid Template Rows

Kolom saja belum membuat grid dua dimensi yang utuh; sisi vertikalnya diatur oleh grid-template-rows. Properti ini bekerja dengan pola yang sama persis seperti grid-template-columns — daftar ukuran dipisah spasi, jumlah nilai menentukan jumlah baris — tetapi arahnya ke bawah dan unit yang cocok sedikit berbeda. Chapter ini membahas cara mendefinisikan baris eksplisit, apa yang terjadi pada baris yang tidak kita definisikan, dan mengapa tinggi baris sering lebih baik mengikuti konten.

Menentukan Tinggi Baris #

Daftar nilai pada grid-template-rows menyusun baris dari atas ke bawah:

.papan-laporan {
  display: grid;
  grid-template-columns: 130px 130px 130px;
  grid-template-rows: 48px 88px;
}

Demo berikut menunjukkan efeknya:

Perhatikan bahwa kedua properti template saling melengkapi: grid-template-columns mengatur lebar tiap lajur, grid-template-rows mengatur tingginya.

Satu perbedaan penting dari kolom: tinggi persentase tidak punya acuan kecuali container diberi tinggi pasti. grid-template-rows: 50% pada container tanpa height dihitung dari tinggi konten dan hasilnya sering tidak terduga. Untuk baris, kombinasi yang paling aman adalah px, auto, dan (setelah chapter berikutnya) fr.

Baris yang Tidak Didefinisikan Berukuran auto #

Apa yang terjadi bila item lebih banyak daripada sel pada baris eksplisit? Grid menciptakan baris tambahan secara otomatis, dan baris-baris tersebut berukuran auto — mengikuti konten terbesar di dalamnya.

.papan-laporan {
  display: grid;
  grid-template-columns: 130px 130px 130px;
  grid-template-rows: 48px;
}

Perilaku baris otomatis ini pula yang selama ini bekerja tanpa kita sadari pada demo-demo sebelumnya.

Dua catatan praktis tentang baris auto:

• Tinggi baris diambil dari item tertinggi pada baris tersebut, termasuk padding dan border.
• Konten yang lebih tinggi dari baris eksplisit tetap terlihat (overflow visible), sehingga angka 48px yang terlalu kecil tidak memotong teks — teksnya hanya keluar dari batas baris.

Pengaturan lanjutan untuk baris otomatis (misalnya memberi tinggi seragam pada semua baris implisit lewat grid-auto-rows) dibahas pada chapter Implicit dan Explicit Grid di bagian kedua section.

Mencampur Baris Eksplisit dan Alur Otomatis #

Pola yang paling sering dipakai di layout nyata: sebagian baris didefinisikan eksplisit, sisanya dibiarkan mengalir. Grid tetap menempatkan item berurutan; baris eksplisit berperan sebagai “bingkai” yang ukurannya pasti, sementara sisanya fleksibel.

.panel-app {
  display: grid;
  grid-template-rows: 52px 96px auto;
}

Dengan tiga nilai ini, baris 1 dan 2 punya tinggi terkunci, sedangkan baris 3 dan seterusnya mengikuti konten. Pola ini ideal ketika hanya header dan strip statistik yang harus konsisten, sementara bagian isi panjangnya berubah-ubah.

Demo berikut menyusun panel laporan dengan baris header terkunci, strip statistik setinggi 88 piksel, dan baris isi berukuran auto — di dalamnya kita memakai flex container untuk tiga angka berdampingan:

Struktur seperti ini adalah cetakan awal dasbor sungguhan yang kita rakit utuh di bagian kedua section.

Kesalahan Umum #

Dari ketiganya, pola terakhir paling sering dibutuhkan: dasbor setinggi layar memang menuntut container dengan tinggi pasti sebelum barisnya bisa direntangkan — fondasi yang kita rakit utuh pada chapter Layout Dashboard di bagian kedua section.

Ringkasan #

grid-template-rows melengkapi grid-template-columns dengan pola penulisan yang identik: daftar ukuran dari atas ke bawah. Baris yang tidak didefinisikan terbentuk otomatis dengan ukuran auto mengikuti konten, dan mencampur baris eksplisit dengan alur otomatis adalah pola wajar di layout nyata. Satu keinginan masih tersisa: kolom dan baris kita selama ini berukuran piksel yang kaku, padahal desain modern menuntut proporsi yang menyesuaikan lebar layar. Chapter berikutnya memperkenalkan satuan yang dibuat khusus untuk itu: fr.