CSS Grid คืออะไร?
CSS Grid Layout คือระบบเลย์เอาต์สองมิติที่ฝังอยู่ในเบราว์เซอร์สมัยใหม่ คุณกำหนด grid container ด้วย display: grid จากนั้นควบคุมคอลัมน์ด้วย grid-template-columns และแถวด้วย grid-template-rows หน่วยเศษส่วน (fr) จะแจกจ่ายพื้นที่ว่างตามสัดส่วน รายการลูกสามารถขยายได้หลายคอลัมน์หรือแถวโดยใช้ grid-column: span N และ grid-row: span N
วิธีใช้ CSS Grid Generator
-
กำหนดจำนวนคอลัมน์และแถวโดยใช้ช่องกรอกตัวเลข (1–12 สำหรับแต่ละช่อง)
-
ปรับ grid-template-columns และ grid-template-rows เพื่อควบคุมขนาด (เช่น 1fr 2fr, 200px auto)
-
กำหนดช่องว่างระหว่างเซลล์ (เช่น 10px, 1rem)
-
คลิกเซลล์ใดก็ได้ในพรีวิวเพื่อเลือก (เปลี่ยนเป็นสีส้ม)
-
กำหนด col-span และ row-span ในแผง 'การขยายเซลล์' จากนั้นคลิก 'นำไปใช้' เซลล์ที่ขยายจะเปลี่ยนเป็นสีเขียว
-
คลิกแท็บ CSS หรือ HTML เพื่อสลับรูปแบบผลลัพธ์ จากนั้นคัดลอกไปยังคลิปบอร์ด
-
คลิก 'รีเซ็ตทั้งหมด' เพื่อเริ่มต้นใหม่ด้วย grid 3×3 ใหม่