Grid-template-kolom / grid-template-baris - Trik CSS

Properti grid-template-rowsdan grid-template-columnsadalah properti CSS utama untuk membuat tata letak kisi, setelah elemen tersebut adalah konteks kisi ( display: grid;).

Ada juga -ms-grid-columnsdan -ms-grid-rows, yang merupakan versi IE lama ini. Anda mungkin ingin mempertimbangkan Autoprefixing untuk mendapatkan mereka, atau tidak, panggilan Anda. Ada juga periode aneh di mana mereka berada grid-definition-columnsdan grid-definition-rows, tapi itu bukan masalah lagi.

Berikut contoh yang berasal dari dokumentasi Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Ini menentukan jumlah baris / kolom dalam kisi serta dimensinya.

Kedua properti ini mendukung daftar nilai yang dipisahkan oleh spasi. Setiap nilai akan menentukan kolom / baris baru dengan menetapkan dimensi. Daftar 4 nilai akan menghasilkan 4 kolom / baris. Nilai tunggal akan menghasilkan satu kolom / baris.

Nilai-nilai yang diterima meliputi panjang (seperti pxatau em), persentase, pecahan ( fr; lihat di bawah), auto(atau fit-content), min-content, max-content, dan minmax(), atau repeat()fungsi.

Pada contoh kode di atas, artinya:

Kolom 1 ( kata kunci otomatis ): Kolom disesuaikan dengan isi kolom.
Kolom 2 ("100px"): Kolom memiliki lebar 100 piksel.
Kolom 3 ("1fr"): Kolom menempati satu unit pecahan dari ruang yang tersisa.
Kolom 4 ("2fr"): Kolom menempati dua unit pecahan dari ruang yang tersisa.

Baris 1 ("50px"): Tinggi baris 50 piksel.
Baris 2 ("5em"): Tinggi baris 5 em.
Baris 3 ( min-konten kata kunci): Baris sekecil konten yang akan dibiarkan.
Baris 4 ( kata kunci otomatis ): Baris dipasang ke konten di baris.

ulang()

The repeat()Fungsi telah dirancang khusus untuk modul ini. Ini memungkinkan Anda untuk menentukan pola yang diulang X kali. Suka repeat(6, 1fr);. Misalkan Anda ingin membuat 12 kolom dengan lebar sama yang diberi jarak satu sama lain dengan margin 1%; Anda bisa mendefinisikan 1fr repeat(11, 1% 1fr). Itu sama dengan 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Unit fr

The frUnit dapat digunakan untuk grid-rowsdan grid-columnsnilai-nilai. Ini adalah singkatan dari "fraksi ruang yang tersedia". Anggap saja sebagai persentase untuk ruang yang tersedia saat Anda melepas kolom / baris berukuran tetap dan berbasis konten. Seperti yang dikatakan spesifikasi:

Distribusi ruang pecahan terjadi setelah semua ukuran 'panjang' atau baris dan kolom berbasis konten telah mencapai maksimumnya.

Terkait

Sumber daya terbaik kami untuk semua hal CSS grid adalah Panduan Lengkap kami untuk CSS Grid.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.