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