เครื่องกำเนิดตาราง CSS

การประกาศพื้นที่เทมเพลตกริดเป็นหนึ่งใน CSS ที่อ่านง่ายที่สุดที่มีอยู่ แต่จะเกิดขึ้นเพียงครั้งเดียวเท่านั้น การไปถึงที่นั่นด้วยตนเองหมายถึงการนับสตริงที่ยกมาและจับคู่ความยาวของแถว และเซลล์ที่ไม่ตรงกันหนึ่งเซลล์จะทำลายเลย์เอาต์ทั้งหมดอย่างเงียบๆ ตัวสร้างนี้จะเปลี่ยนสิ่งนั้นให้เป็นการจัดการโดยตรง: ตั้งค่าจำนวนคอลัมน์และแถว พิมพ์ชื่อลงในเซลล์ใดๆ ของตารางสด และชื่อที่ตรงกันจะรวมเข้าเป็นขอบเขตที่มีชื่อหนึ่งโดยอัตโนมัติ

ภายใต้ประทุน ทุกเซลล์ที่คุณเว้นว่างไว้จะกลายเป็นจุดในสตริงพื้นที่เทมเพลตกริดที่สร้างขึ้น และทุกเซลล์ที่คุณตั้งชื่อจะกลายเป็นส่วนหนึ่งของสี่เหลี่ยมของชื่อนั้น CSS อนุญาตให้พื้นที่ที่มีชื่อครอบครองบล็อกสี่เหลี่ยมสะอาดๆ เพียงบล็อกเดียว ดังนั้นเครื่องมือจะตรวจสอบเมื่อคุณพิมพ์และแจ้งให้คุณทราบอย่างชัดเจนเมื่อชื่อยังไม่สร้างรูปสี่เหลี่ยมผืนผ้าที่ถูกต้อง เบราว์เซอร์จะปฏิเสธแทนที่จะสร้าง CSS อย่างเงียบๆ

ช่องว่างคอลัมน์และช่องว่างแถวมีค่าเริ่มต้นที่ 8px และรวมกันเป็นบรรทัดช่องว่างเดียวเมื่อตรงกัน และตารางแสดงตัวอย่างแบบสดจะสะท้อนแทร็กเทมเพลตตารางและเทมเพลตกริดของคุณเสมอ รวมถึงคอลัมน์พิกเซลคงที่จากค่าที่ตั้งไว้ล่วงหน้า เช่น รางด้านข้างขนาด 200px ของจอกศักดิ์สิทธิ์ เอาต์พุตที่คัดลอกได้ครอบคลุมทั้งสองด้าน: บล็อก CSS ที่พร้อมสำหรับสไตล์ชีตของคุณและโครงกระดูก HTML ที่ตรงกันพร้อม div พื้นที่ตารางหนึ่งรายการต่อภูมิภาคที่ตั้งชื่อ

Grid และ flexbox แก้ปัญหาเลย์เอาต์ที่แตกต่างกัน และ css-flexbox-generator บนไซต์นี้เป็นจุดเริ่มต้นที่ดีกว่าสำหรับเลย์เอาต์แบบมิติเดียว — แถวหรือคอลัมน์เดียวของรายการที่ยืดหยุ่น เช่น แถบนำทางหรือสแต็กการ์ด เข้าถึงตัวสร้างกริดนี้แทนเมื่อคุณต้องการการควบคุมแบบสองมิติ แถวและคอลัมน์ที่ชัดเจน หรือขอบเขตที่มีชื่อ เช่น ส่วนหัว/นำทาง/หลัก/ส่วนท้าย เครื่องมือทั้งสองมักจะจบลงที่หน้าเดียวกัน ตารางสำหรับเชลล์ของหน้าและเฟล็กซ์บ็อกซ์ภายในชิ้นส่วนของมัน เช่นเดียวกับเครื่องมืออื่นๆ บนไซต์นี้ เครื่องมือจะทำงานทั้งหมดในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด ไม่มีบัญชี