ตารางกริดแบบ 12 ช่วง

คลาสสิกอีกแบบ: ตารางกริดแบบ 12 ช่วง คุณเขียนตารางกริดใน CSS ได้อย่างรวดเร็วด้วยฟังก์ชัน repeat() การใช้ repeat(12, 1fr); สําหรับคอลัมน์เทมเพลตตารางกริดจะมี 12 คอลัมน์ในแต่ละ 1fr

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

ตอนนี้คุณมีตารางกริดการติดตาม 12 คอลัมน์แล้ว ก็สามารถวางองค์ประกอบย่อยไว้ในตารางกริดได้ วิธีหนึ่งที่ทำได้คือการวางโดยใช้เส้นตารางกริด ตัวอย่างเช่น grid-column: 1 / 13 จะขยายไปจนสุดจากบรรทัดแรกถึงบรรทัดสุดท้าย (13) และครอบคลุม 12 คอลัมน์ grid-column: 1 / 5; จะครอบคลุม 4 รายการแรก

อีกวิธีหนึ่งในการเขียนข้อความนี้คือการใช้คีย์เวิร์ด span เมื่อใช้ span คุณจะกําหนดเส้นเริ่มต้นและระบุจํานวนคอลัมน์ที่จะครอบคลุมจากจุดเริ่มต้นนั้นได้ ในกรณีนี้ grid-column: 1 / span 12 จะมีค่าเท่ากับ grid-column: 1 / 13 และ grid-column: 2 / span 6 จะมีค่าเท่ากับ grid-column: 2 / 8

.child-span-12 {
  grid-column: 1 / span 12;
}

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

        .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}