ตัวสร้าง CSS Grid
สนามทดลองแบบภาพสำหรับสร้างเลย์เอาต์ CSS Grid พร้อมตัวอย่างสด
คุณสมบัติคอนเทนเนอร์ Grid
คุณสมบัติไอเทม Grid
พรีเซ็ตเลย์เอาต์
ตัวอย่างสด
CSS ที่สร้างขึ้น
ตัวอย่างการใช้งาน
เลย์เอาต์ 2 คอลัมน์
สร้างเลย์เอาต์ 2 คอลัมน์สำหรับเนื้อหาและแถบด้านข้างด้วย CSS Grid
กริดแดชบอร์ด
สร้างเลย์เอาต์แดชบอร์ดด้วยวิดเจ็ตขนาดต่างๆ
แกลเลอรีรูปภาพ
สร้างกริดแกลเลอรีรูปภาพที่ตอบสนองด้วยเซลล์ขนาดเท่ากัน
คุณสมบัติ
ตัวอย่างภาพสด
ดูเลย์เอาต์ Grid อัปเดตแบบเรียลไทม์
โค้ด CSS พร้อมใช้
รับโค้ด CSS สะอาดสำหรับคอนเทนเนอร์และไอเทม Grid
พรีเซ็ตเลย์เอาต์
เริ่มต้นอย่างรวดเร็วด้วยพรีเซ็ต Grid ทั่วไป
การขยายไอเทม Grid
กำหนดค่าไอเทมให้ครอบคลุมหลายคอลัมน์หรือแถว
วิธีใช้?
ตั้งค่าคุณสมบัติ Grid
เลือกจำนวนคอลัมน์และแถว ขนาด gap และการจัดวาง
กำหนดค่าไอเทม
เพิ่มไอเทมและกำหนด grid-column และ grid-row
คัดลอก CSS
คัดลอกโค้ด CSS ที่สร้างขึ้นและใช้ในโปรเจกต์ของคุณ
คำถามที่พบบ่อย
ตัวสร้าง CSS Grid คืออะไร?
ตัวสร้าง CSS Grid เป็นสนามทดลองแบบภาพที่คุณตั้งค่าคอลัมน์ แถว ช่องว่าง และการขยายไอเทม แล้วเห็นเลย์เอาต์อัปเดตสด เมื่อดูดีแล้ว คัดลอก CSS สะอาดไปวางในโปรเจกต์ ไม่ต้องจำไวยากรณ์
คุณสมบัติหลัก
กำหนดจำนวนคอลัมน์และแถวด้วยขนาดแบบยืดหยุ่น (fr, px, auto) ปรับ gap, justify-items และ align-items ในระดับคอนเทนเนอร์ เลือกไอเทมแต่ละตัวเพื่อตั้งค่า grid-column/grid-row สำหรับการขยาย พรีเซ็ตเลย์เอาต์หกแบบสำหรับเริ่มต้นอย่างรวดเร็ว
กรณีใช้งานทั่วไป
เลย์เอาต์หน้าเว็บที่มีส่วนหัว แถบด้านข้าง เนื้อหาหลัก และส่วนท้าย เลย์เอาต์แดชบอร์ดที่มีการ์ดวิดเจ็ตขนาดต่างกัน แกลเลอรีภาพด้วยเซลล์สม่ำเสมอ เลย์เอาต์แบบนิตยสารที่บทความบางส่วนครอบคลุมหลายคอลัมน์
เคล็ดลับ
ใช้หน่วย fr สำหรับเลย์เอาต์ที่ปรับตัวตามขนาดหน้าจอ คุณสมบัติ gap สะอาดกว่าการเพิ่ม margin ในแต่ละเซลล์ เริ่มจากพรีเซ็ตแล้วปรับขนาดตามการออกแบบ
ความเป็นส่วนตัว
ทำงานทั้งหมดในเบราว์เซอร์ ไม่มีการกำหนดค่า Grid หรือข้อมูลออกจากเครื่องของคุณ