grid-auto-flow

Properti CSS grid-auto-flow menentukan bagaimana item-item yang ditempatkan secara otomatis mengalir ke grid.

<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>10</div>
</div>

#grid {
display: grid;
grid-template-rows: 80px 80px;
grid-auto-flow: column;
grid-gap: 5px;
}

#grid>div {
background-color: #F48FB1;
color: white;
font-size: 1.8em;
padding: 10px;
}

Properti grid-auto-flow hanya berurusan dengan item grid yang ditempatkan ke trek yang dibuat secara implisit.

Item grid yang tidak ditempatkan secara eksplisit ditempatkan secara otomatis ke ruang kosong, dan grid implisit dibuat hanya untuk tujuan itu.

Properti grid-auto-flow menentukan secara tepat bagaimana item-item ini ditempatkan.

Yuk kita lihat kode yang relevan dari contoh di atas:

grid-template-rows: 80px 80px;
grid-auto-flow: column;

Saya mendefinisikan dua baris, tetapi saya tidak mendefinisikan kolom apa pun.

Oleh karena itu wadah kotak perlu menambahkan kolom secara implisit agar sesuai dengan setiap item kotak ke dalam kotak.

Biasanya ketika kamu melakukan ini, wadah kotak akan menambahkan lebih banyak baris untuk mengakomodasi item kotak, bukan kolom.

Item grid hanya akan menumpuk di atas satu sama lain. Ini karena nilai awal properti grid-auto-flow adalah baris.

Tetapi pada contoh di atas, saya menggunakan grid-auto-flow: column untuk menentukan bahwa item kotak akan ditempatkan secara otomatis ke dalam kolom, bukan baris.

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.

Keyword dense

Kata kunci dense dapat berguna jika kamu memiliki item grid berukuran berbeda di dalam implicit grid, beberapa di antaranya menjangkau beberapa trek.

Biasanya, implicit grid hanya akan menata item dalam urutan sumber. Jika semua item grid memiliki ukuran yang sama, dan pas dalam satu trek, ini biasanya akan menghasilkan grid dengan spasi yang sama dengan item grid terdekat.

Tetapi jika beberapa item grid menjangkau beberapa trek dan yang lainnya tidak, kamu bisa mengakhiri dengan grid di mana item mengalir ke baris berikutnya jauh sebelum akhir wadah grid, menyebabkan grid terlihat sedikit “renggang” di satu sisi.

Tanpa Keyword dense

Di sini, item grid 2 dan 3 merentang dua kolom. Ini menyebabkan item 3 bergeser ke baris berikutnya, meninggalkan ruang di ujung baris pertama.

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

#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 2px;
}

#grid>div {
background-color: #FFCC80;
color: white;
font-size: 1.9em;
padding: 10px;
width: 150px;
}

#grid>div.wide {
width: 300px;
grid-column-end: span 2;
}

Dengan Keyword dense

Dengan menggunakan kata kunci dense menyebabkan item 4 dipindahkan ke akhir baris pertama sehingga mengisi ruang yang ditinggalkan oleh item 3.

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

#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-flow: dense;
grid-gap: 2px;
}

#grid>div {
background-color: #FFCC80;
color: white;
font-size: 1.9em;
padding: 10px;
width: 150px;
}

#grid>div.wide {
width: 300px;
grid-column-end: span 2;
}

Kata kunci dense adalah kata kunci opsional yang memberi tahu browser untuk menggunakan algoritme pengemasan “dense”.

Artinya, peramban akan berusaha mengisi lubang sebelumnya di kotak jika item yang lebih kecil muncul nantinya.

Penting untuk dicatat bahwa ini dapat menyebabkan item grid muncul di luar urutan sumber.

Kamu dapat melihat dari contoh di atas bahwa item kotak “4” muncul sebelum “3” setelah kata kunci dense sebelumnya.

CSS Syntax

grid-auto-flow: row | column | dense | row dense | column dense;

JavaScript Syntax

object.style.gridAutoFlow="row dense"

Attribute Value