ออกแบบ
เครื่องสร้าง CSS Grid
สร้างเลย์เอาต์แบบ CSS Grid แบบเห็นภาพ
ค่าที่ตั้งไว้ล่วงหน้าของเค้าโครง (10)
ลากผ่านเซลล์เพื่อระบายสี่เหลี่ยม หรือคลิกทีละเซลล์ พื้นที่ที่ตั้งชื่อทุกส่วนต้องเป็นสี่เหลี่ยมผืนผ้าเสมอ
ดูตัวอย่างสด
หนึ่งมิติ: เครื่องสร้าง CSS Flexbox.
สร้าง CSS grid พร้อมพื้นที่ที่มีชื่อ
วาดตารางตัวอักษรสำหรับ template-areas หรือเลือกแบบสำเร็จ ตัวอย่างแสดงแต่ละส่วนด้วยโทนสีเฉพาะ
คำถามที่พบบ่อย
grid-template-areas คืออะไร?
วิธีตั้งชื่อพื้นที่ของเลย์เอาต์ (header, sidebar, main…) และวางรายการตามชื่อแทนหมายเลขเส้นกริด คลิกเซลล์ด้านล่างเพื่อระบายตัวอักษรของพื้นที่ — CSS จะอัปเดตแบบสด
เริ่มจากพรีเซ็ตได้ไหม?
ได้ — พรีเซ็ตเลย์เอาต์สิบแบบ รวมถึง Holy grail, dashboard, magazine และ app shell จะโหลดพื้นที่ที่ตั้งชื่อไว้ได้ในคลิกเดียว
มีอะไรถูกอัปโหลดไหม?
ไม่ได้ CSS สร้างขึ้นทั้งหมดภายในเบราว์เซอร์
อัปเดตล่าสุด: