เค้าโครงตาราง CSS ของจอกศักดิ์สิทธิ์ — รหัสพร้อม
ออกแบบเค้าโครง CSS Grid ด้วยสายตา: ตั้งค่าคอลัมน์ แถว และช่องว่าง จากนั้นพิมพ์ชื่อพื้นที่ลงในเซลล์เพื่อสร้างพื้นที่เทมเพลตกริด พร้อมการแสดงตัวอย่างแบบเรียลไทม์และ CSS และ HTML ที่คัดลอกได้
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างกริดที่โหลดไว้ล่วงหน้าด้วยเค้าโครงจอกศักดิ์สิทธิ์: 3 คอลัมน์และ 3 แถว โดยมีส่วนหัวและส่วนท้ายที่ขยายเต็มความกว้างและมีแถวนำทาง/หลัก/แยกกันอยู่ระหว่างนั้น แถวส่วนหัวใช้ความสูงอัตโนมัติ แถวกลางจะเติมพื้นที่ที่เหลือ และคอลัมน์ด้านข้างทั้งสองจะกำหนดไว้ที่ 200px ในขณะที่คอลัมน์หลักจะใช้เวลาส่วนที่เหลือ
เลย์เอาต์จอกศักดิ์สิทธิ์ได้รับชื่อนี้เพราะมันยากจริงๆ ที่จะสร้างได้อย่างน่าเชื่อถือก่อน CSS Grid — หลายปีแห่งการแฮ็กแบบโฟลต เลย์เอาต์ตาราง และการวางตำแหน่งแบบสัมบูรณ์ที่พยายามปลอมแปลงรูปร่างที่แน่นอนนี้ ด้วยพื้นที่เทมเพลตกริด จะยุบลงเป็นห้าขอบเขตที่มีชื่อและขนาดแทร็กไม่กี่ขนาด ซึ่งเป็นสาเหตุที่ว่าทำไมมันจึงยังคงเป็นตัวอย่างแรกมาตรฐานสำหรับการสอน CSS Grid
ทุกตัวเลขและช่องว่างในหน้านี้ยังคงอยู่: ลดขนาดคอลัมน์ด้านข้าง เพิ่มแถวที่สี่ หรือเปลี่ยนชื่อพื้นที่และดูตัวอย่างและอัปเดต CSS ที่คัดลอกได้ทันที คัดลอกบล็อก CSS และ HTML ลงในโปรเจ็กต์ของคุณโดยตรง ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณ โดยไม่มีการอัปโหลดอะไรเลย