Atribut grid-row CSS

Definisi dan penggunaan

Properti grid-row menentukan ukuran dan posisi item grid dalam layout grid, dan ini adalah singkatan untuk berbagai atribut berikut:

Lihat juga:

Tutorial CSS:CSS Grid Layout

Contoh

Contoh 1

Membuat "item1" dimulai di baris 1 dan melintasi dua baris:

.item1 {
  grid-row: 1 / span 2;
}

Coba sendiri

Contoh 2

Anda dapat menggunakan nilai garis baris untuk menggantikan jumlah baris yang akan dilintasi:

.item1 {
  grid-row: 1 / 3;
}

Coba sendiri

CSS syntaxa

grid-row: grid-row-start / grid-row-end;

Nilai atribut

Nilai Deskripsi
grid-row-start Menentukan baris mana pertama tampilan item dimulai.
grid-row-end Menentukan di garis baris mana tampilan item berhenti, atau melintasi berapa banyak baris.

Detil teknis

Nilai default: auto / auto
Inheritance: Tidak
Produksi animasi: Dukungan. Lihat:Properti animasi。
Versi: CSS Grid Layout Module Level 1
JavaScript syntaxa: object.style.gridRow="2 / span 2"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung properti ini penuh.

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