Thuộc tính grid-auto-flow

Thuộc tính grid-auto-flow thiết lập cách sắp xếp tự động các phần tử trong Grid. Có thể có các giá trị row - lấp đầy các phần tử theo hàng ngang, column - theo cột dọc, dense - đặt các phần tử vào tất cả các vị trí trống trong lưới; row dense - sắp xếp các phần tử, lấp đầy từng hàng và tất cả các khoảng trống trong lưới; column dense - lấp đầy các phần tử theo từng cột và tất cả khoảng trống trong Grid.

Cú pháp

bộ chọn {
	grid-auto-flow: phần-cần-lấp-đầy-của-grid;
}

Ví dụ

Hãy lấp đầy tất cả các hàng trong Grid:

<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;
}

Ví dụ

Bây giờ hãy lấp đầy các phần tử vào tất cả các cột trong Grid:

<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;
}

Ví dụ

Hãy sắp xếp tất cả các phần tử trong Grid để không còn khoảng trống:

<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;
}

Ví dụ

Bây giờ hãy lấp đầy các phần tử vào tất cả khoảng trống trong các hàng:

<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;
}

Ví dụ

Hãy thay đổi ví dụ trước đó, để các phần tử lấp đầy tất cả khoảng trống trong các cột:

<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;
}

Xem thêm

thuộc tính grid,
thiết lập cách viết tắt cho các thuộc tính cột và hàng
thuộc tính grid-auto-rows,
thiết lập số lượng và chiều rộng hàng trong Grid ngầm định
thuộc tính grid-template-columns,
thiết lập số lượng và chiều rộng cột trong Grid
thuộc tính grid-template-rows,
thiết lập số lượng và chiều rộng hàng trong Grid