การจัดเรียงแบบตารางกริดด้วยระยะห่างที่ถูกต้องใน CSS

เรามาสร้างการจัดเรียงแบบตารางกริดที่ใช้งานได้จริง โดยไม่มีปัญหาโดยใช้ระยะห่างจาก margin สมมติว่าเราเริ่มต้นด้วยกริดแบบนี้ ที่ยังไม่มีระยะห่าง:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

เรามาสร้างระยะห่างแนวนอนระหว่าง องค์ประกอบด้วย margin

เพื่อทำสิ่งนี้ กำหนดให้กับองค์ประกอบลูกทั้งหมด ค่า margin-right เป็น 10px และสำหรับทุก ๆ องค์ประกอบลูกที่สาม ให้ตั้งค่า margin นี้เป็นศูนย์ เราใช้ pseudo-class nth-child กำหนดพารามิเตอร์ในนั้น เพื่อให้ได้ ทุก ๆ องค์ประกอบที่สาม

เพิ่มความกว้างขององค์ประกอบแม่เป็น 320px เพื่อให้มีพื้นที่สำหรับระยะห่าง และมาดูกันว่า เราได้ผลลัพธ์อย่างไร:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

ดังนั้นทุกอย่างทำงานได้ มาลองลบองค์ประกอบสุดท้ายออก เพื่อให้แถวสุดท้ายมีองค์ประกอบน้อยลง และตรวจสอบว่าเราจะไม่มีปัญหา กับแถวสุดท้ายนี้:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

สร้างการจัดเรียงแบบตารางกริดโดยมีสององค์ประกอบในหนึ่งแถว และมีระยะห่างระหว่างองค์ประกอบเป็น 20px