เครื่องมือสร้าง CSS Grid
ออกแบบ CSS Grid layout ด้วยภาพ กำหนดคอลัมน์ แถว และระยะห่าง จากนั้นพิมพ์ชื่อพื้นที่ลงในเซลล์เพื่อสร้าง grid-template-areas — พร้อมพรีวิวสด และคัดลอก CSS กับ HTML ได้
🔒 ประมวลผลทั้งหมดในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดสิ่งใดที่คุณป้อนที่นี่
ผลลัพธ์
การประกาศ grid-template-areas เป็นโค้ด CSS ที่อ่านง่ายที่สุดแบบหนึ่ง แต่ก็ต่อเมื่อมันมีอยู่แล้ว — การเขียนด้วยมือหมายถึงการนับ quoted string และตรวจสอบความยาวแถวให้ตรงกัน แค่เซลล์เดียวที่ไม่ตรงก็ทำให้ layout ทั้งหมดพังแบบเงียบ ๆ เครื่องมือนี้เปลี่ยนขั้นตอนนั้นเป็นการจัดการโดยตรง: กำหนดจำนวนคอลัมน์และแถว พิมพ์ชื่อลงในเซลล์ใดก็ได้ของกริดสด แล้วเซลล์ที่ชื่อตรงกันจะรวมเป็นพื้นที่ที่ตั้งชื่อโดยอัตโนมัติ
เบื้องหลัง ทุกเซลล์ที่คุณปล่อยว่างจะกลายเป็นจุดในสตริง grid-template-areas ที่สร้างขึ้น และทุกเซลล์ที่คุณตั้งชื่อจะกลายเป็นส่วนหนึ่งของสี่เหลี่ยมของชื่อนั้น CSS อนุญาตให้พื้นที่ที่ตั้งชื่อกินพื้นที่เป็นบล็อกสี่เหลี่ยมเดียวที่สมบูรณ์เท่านั้น เครื่องมือจึงตรวจสอบขณะคุณพิมพ์ และบอกคุณทันทีเมื่อชื่อยังไม่ก่อตัวเป็นสี่เหลี่ยมที่ถูกต้อง — แทนที่จะสร้าง CSS ที่เบราว์เซอร์จะปฏิเสธแบบเงียบ ๆ
column-gap และ row-gap มีค่าเริ่มต้นที่ 8px และจะรวมเป็นบรรทัด gap เดียวเมื่อค่าทั้งสองเท่ากัน ส่วนพรีวิวกริดสดจะสะท้อนแทร็ก grid-template-columns และ grid-template-rows ของคุณเสมอ รวมถึงคอลัมน์ความกว้างคงที่จากพรีเซ็ตอย่างแถบข้าง 200px ของ Holy Grail โค้ดที่คัดลอกได้ครอบคลุมทั้งสองด้าน: บล็อก CSS พร้อมใช้ใน stylesheet และโครง HTML ที่เข้ากัน โดยมี div grid-area หนึ่งตัวต่อพื้นที่ที่ตั้งชื่อ
Grid กับ flexbox แก้ปัญหา layout คนละแบบ และ css-flexbox-generator ในเว็บนี้เป็นจุดเริ่มต้นที่ดีกว่าสำหรับ layout แบบหนึ่งมิติ — แถวหรือคอลัมน์เดี่ยวของไอเท็มที่ยืดหยุ่น เช่น nav bar หรือการ์ดเรียงซ้อนกัน ส่วนเครื่องมือสร้าง Grid นี้เหมาะเมื่อคุณต้องการควบคุมแบบสองมิติ มีแถวและคอลัมน์ชัดเจน หรือพื้นที่ตั้งชื่ออย่าง header/nav/main/footer ทั้งสองเครื่องมือมักใช้ร่วมกันในหน้าเดียวกัน โดย Grid ใช้สร้างโครงหน้า และ Flexbox ใช้ภายในชิ้นส่วน เหมือนทุกเครื่องมือในเว็บนี้ มันทำงานทั้งหมดในเบราว์เซอร์ของคุณ — ไม่ต้องอัปโหลด ไม่ต้องมีบัญชี