Properti grid-template-rows CSS

Definisi dan penggunaan

grid-template-rows menentukan jumlah baris (dan tinggi) di layout grid.

Nilai adalah daftar yang dipisahkan spasi, di mana setiap nilai menentukan tinggi baris yang relevan.

Lihat juga:

Panduan CSS:Layout Grid CSS

Panduan referensi CSS:Atribut grid-columns

Panduan referensi CSS:Atribut grid-template

Contoh

Tentukan ukuran baris (tinggi):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Coba sendiri

Sintaksis CSS

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Nilai atribut

Nilai Deskripsi
none Tidak diatur ukuran. Buat baris saat diperlukan.
auto Ukuran baris tergantung ukuran kontainer dan ukuran konten proyek di baris.
max-content Atur ukuran setiap baris berdasarkan proyek yang paling besar di baris.
min-content Atur ukuran setiap baris berdasarkan proyek yang paling kecil di baris.
length Atur ukuran baris, menggunakan nilai panjang yang sah. LihatSatuan panjang.

Detil teknis

Nilai default: none
Mengambil warisan: Tidak
Produksi animasi: Didukung. Lihat:Atribut berhubungan dengan animasi.
Versi: Modul Layout Grid CSS Level 1
Sintaksis JavaScript: object.style.gridTemplateRows="50px 200px"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuhnya.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44