Grid: คอลัมน์, แถว, พื้นที่ (areas)

สร้างแกลเลอรีและเลย์เอาต์ของหน้าเว็บที่สมบูรณ์ด้วยคอลัมน์ แถว และพื้นที่ที่ตั้งชื่อได้ของ CSS Grid

9 นาที · 3 คำถาม

Flexbox จัดตำแหน่งไปตามแกนเดียว ส่วน Grid ควบคุมทั้งสองแกนพร้อมกัน ทันทีที่แบบร่างของคุณดูเหมือนตาราง แกลเลอรีรูปภาพ แดชบอร์ด หน้าเต็มพร้อมส่วนหัว แถบข้าง และส่วนท้าย Grid คือเครื่องมือที่เหมาะสม container กำหนดโครงสร้างเป็นคอลัมน์และแถว และลูก ๆ จะวางตัวเองโดยอัตโนมัติหรือตรงตำแหน่งที่คุณเลือกพอดี

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

หน่วย fr (fraction หรือ เศษส่วน) แบ่งพื้นที่ที่มีอยู่ 1fr 2fr สร้างสองคอลัมน์โดยคอลัมน์ที่สองกว้างเป็นสองเท่า ต่างจากเปอร์เซ็นต์ตรงที่ fr คำนวณ gap ให้เองโดยที่คุณไม่ต้องคำนวณอะไรเลย หากต้องการเน้นอีลิเมนต์ ให้มันขยายครอบคลุมหลายแทร็กด้วย grid-column และ grid-row

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

สำหรับหน้าเต็ม grid-template-areas ช่วยให้คุณ วาดแบบร่างลงใน CSS ได้โดยตรง แต่ละสตริงแทนหนึ่งแถวของกริด แต่ละคำแทนพื้นที่ที่ตั้งชื่อไว้ จากนั้นลูกจะวางตัวเองด้วย grid-area ผลลัพธ์อ่านได้เหมือนพิมพ์เขียวของสถาปนิก มันคือวิธีที่อ่านง่ายที่สุดสำหรับการจัดเลย์เอาต์ของหน้า

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.site-header { grid-area: header; }
.site-nav { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. หน่วย fr ใน grid-template-columns: 1fr 2fr แทนอะไร
   • เศษส่วนของพื้นที่ที่มีอยู่ของ container
   • เปอร์เซ็นต์ของความกว้างหน้าจอ
   • ขนาดคงที่ที่ระบุเป็นพิกเซล
2. การประกาศใดสร้างสามคอลัมน์ที่มีความกว้างเท่ากัน
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. grid-template-areas ใช้ทำอะไร
   • ตั้งชื่อพื้นที่ของกริดที่ลูก ๆ จะวางตัวเองผ่าน grid-area
   • กำหนดขนาดของคอลัมน์ในกริด
   • สร้างแอนิเมชันระหว่างเซลล์