Sifat grid-auto-flow

Sifat grid-auto-flow menetapkan penempatan unsur secara automatik dalam grid. Boleh mempunyai nilai row - mengisi baris dengan unsur, column - lajur, dense - meletakkan unsur pada semua ruang kosong dalam grid; row dense - menyusun unsur dengan mengisi setiap baris dan semua ruang kosong grid; column dense - mengisi setiap lajur dengan unsur dan semua ruang kosong dalam grid.

Sintaks

pemilih {
	grid-auto-flow: bahagian grid yang diisi;
}

Contoh

Mari kita isi semua baris dalam jadual:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: row;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang mari kita isi semua lajur dalam jadual dengan unsur:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Mari letakkan semua unsur dalam jadual, supaya tiada ruang kosong yang tinggal:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang mari kita isi unsur kesemua ruang kosong dalam baris:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: row dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Mari kita ubah contoh sebelumnya, supaya unsur mengisi kesemua ruang kosong dalam lajur:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: column dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Lihat juga

sifat grid,
yang menetapkan tatatanda ringkas sifat lajur dan baris
sifat grid-auto-rows,
yang menetapkan kuantiti dan lebar baris dalam grid tersirat
sifat grid-template-columns,
yang menetapkan kuantiti dan lebar lajur dalam grid
sifat grid-template-rows,
yang menetapkan kuantiti dan lebar baris dalam grid