Properti grid-auto-rows

Properti grid-auto-rows mengatur jumlah dan lebar baris yang akan ditempati oleh elemen dalam grid implisit. Grid implisit - grid yang dibuat secara otomatis ketika elemen keluar dari batas grid yang sudah ditetapkan. Dalam nilai properti, kita tentukan lebar baris dalam satuan ukuran apapun. Properti ditentukan dalam elemen induk dan mengatur lebar baris dari elemen-elemen turunan.

Sintaksis

cssselektor {
  grid-auto-rows: lebar baris;
}

Contoh

Mari atur lebar baris untuk elemen-elemen kita dalam grid implisit:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
  <div id="elem5">5</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-rows: 40px 60px 80px;
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Lihat juga