grid-auto-rows

Properti CSS grid-auto-rows menentukan nama-nama baris dan melacak fungsi-fungsi ukuran dari baris grid yang dibuat secara implisit.

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

#grid {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 200px;
grid-auto-rows: 80px;
grid-gap: 10px;
}
#grid > div {
background-color: #FFCC80;
color: white;
font-size: 1.9em;
padding: 10px;
}

Properti grid-auto-rows hanya berurusan dengan rows yang dibuat secara implisit.

Ini adalah baris yang belum secara eksplisit berukuran dengan properti grid-template-rows.

Jika kamu memeriksa kode dari contoh di atas:

grid-template-columns: auto auto auto;
grid-template-rows: 200px;
grid-auto-rows: 80px;

Kamu bisa melihat bahwa hanya baris pertama yang secara eksplisit berukuran sesuai properti grid-template-rows.

Dua baris lainnya dibuat secara implisit, dan oleh karena itu mereka diukur menurut properti grid-auto-rows.

Catatan:

CSS memiliki konsep “explicit grid” dan “implicit grid”. “Explicit grid” mengacu pada grid yang kamu tentukan dengan properti grid-template-rows, grid-template-columns, dan grid-template-areas.

Implicit grid dibuat setiap kali kamu menambahkan item grid yang pas di luar grid explicit.

Misalnya, kamu mungkin hanya menentukan 2 baris dan 3 kolom tetapi ada lebih banyak item kotak daripada yang bisa masuk ke dalamnya.

Dalam hal ini, untuk memenuhi item grid tambahan, wadah grid menghasilkan trek implicit grid dengan menambahkan garis implicit grid ke grid.

Multiple Values

Properti grid-auto-rows menerima beberapa nilai.

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

#grid {
display: grid;
grid-auto-rows: 40px 60px 80px;
grid-gap: 1px;
}
#grid > div {
background-color: #CE93D8;
color: white;
padding: 10px;
}

CSS Syntax

grid-auto-columns: auto | max-content | min-content | length;

JavaScript Syntax

object.style.gridAutoRows="60px"

Attribute Value