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

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

html<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>

css.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 เพื่อให้มีพื้นที่สำหรับระยะห่าง และมาดูกันว่า เราได้ผลลัพธ์อย่างไร:

html<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>

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

Результат:

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

html<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>

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

Результат: