Khoảng cách giữa các cột và hàng trong CSS Grid

Với thuộc tính gap bạn có thể đồng thời thiết lập khoảng cách giữa các cột và hàng của grid.

Có thể truyền một giá trị, hoặc hai giá trị cách nhau bởi dấu cách. Nếu truyền một giá trị, nó sẽ thiết lập đồng thời khoảng cách giữa các cột và hàng. Nếu truyền hai giá trị, thì giá trị đầu tiên thiết lập khoảng cách giữa các hàng, và giá trị thứ hai - giữa các cột.

Ví dụ

Hãy thiết lập khoảng cách bằng nhau giữa các cột và hàng:

<div id="parent">
	<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>

#parent {
	display: grid;
	gap: 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ví dụ

Hãy thiết lập khoảng cách khác nhau giữa các cột và hàng:

<div id="parent">
	<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>

#parent {
	display: grid;
	gap: 20px 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Bài tập thực hành

Tạo một bảng, trong đó khoảng cách giữa các cột và hàng sẽ là 10px.

Tạo một bảng, trong đó khoảng cách giữa các cột và hàng sẽ là 10px và 5% tương ứng.