ระยะห่างระหว่างคอลัมน์และแถวใน CSS Grid

ด้วยคุณสมบัติ gap สามารถกำหนดระยะห่าง ระหว่างคอลัมน์และแถวของ grid พร้อมกันได้

สามารถส่งค่าได้เพียงค่าเดียว หรือสองค่าคั่นด้วยช่องว่าง หากส่งค่า เพียงค่าเดียว มันจะกำหนดระยะห่าง ระหว่างคอลัมน์และแถวพร้อมกัน หากส่งค่าสองค่า ค่าแรกจะกำหนดระยะห่างระหว่าง แถว และค่าที่สอง - ระหว่าง คอลัมน์

ตัวอย่าง

มากำหนดระยะห่างที่เท่ากันระหว่าง คอลัมน์และแถว:

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

ตัวอย่าง

มากำหนดระยะห่างต่างกันระหว่าง คอลัมน์และแถว:

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

งานฝึกปฏิบัติ

สร้างตาราง ที่มีระยะห่างระหว่าง คอลัมน์และแถวเป็น 10px

สร้างตาราง ที่มีระยะห่างระหว่าง คอลัมน์และแถวเป็น 10px และ 5% ตามลำดับ