ตัวสร้าง CSS Grid: สร้างและพรีวิวเลย์เอาต์ CSS Grid
ตัวสร้าง CSS Grid เป็นเครื่องมือสร้างกริด CSS แบบภาพสำหรับตั้งค่าคอลัมน์ แถว ระยะห่าง และค่า justify/align ของแต่ละไอเท็ม พรีวิวสดแสดงกริดขณะคุณปรับ สร้างบล็อกพร้อมวางที่มี grid-template-columns, grid-template-rows, gap และการจัดวางไอเท็ม แล้วคัดลอกค่าที่ต้องการสำหรับสไตล์ชีตของคุณ
ตัวสร้าง CSS Grid เป็นเครื่องมือสร้างกริด CSS แบบภาพสำหรับสร้างค่า CSS Grid และพรีวิวผลลัพธ์ ตั้งค่าคอลัมน์ แถว และระยะห่าง แล้วเห็นกริดเติมแบบสดขณะทำงาน ให้วิธีรวดเร็วในการสร้างเลย์เอาต์ CSS Grid ออนไลน์และเตรียมค่าเพื่อใช้ในสไตล์ชีต
เครื่องมือสร้างให้คุณตั้งค่าคอลัมน์ แถว และระยะห่าง พร้อมการตั้งค่า justify และ align ของแต่ละไอเท็ม หลังจากสร้างเอาต์พุต คุณสามารถคัดลอกค่าที่ต้องการจากบล็อกพร้อมวาง เอาต์พุตที่สร้างมี grid-template-columns, grid-template-rows, gap และการจัดวางไอเท็ม คุณจึงเห็นประกาศเลย์เอาต์สำคัญพร้อมกัน
CSS Grid เป็นระบบเลย์เอาต์ของ CSS ส่วนบล็อกที่สร้างคือชุดค่า CSS ที่คุณเพิ่มในสไตล์ชีตได้ การใช้พรีวิวแบบภาพช่วยตรวจสอบกริดก่อนคัดลอกค่า มีประโยชน์เมื่อเตรียมตัวอย่างเลย์เอาต์ ตั้งค่า CSS สำหรับการทดสอบหรือฟิกซ์เจอร์ หรือสำรวจค่าคอลัมน์ แถว ระยะห่าง และการจัดวางโดยไม่ต้องเขียนแต่ละประกาศด้วยตนเอง
ตัวสร้าง CSS Grid ทำงานในเบราว์เซอร์ของคุณทั้งหมด อินพุตของคุณถูกประมวลผลบนอุปกรณ์ของคุณและไม่ถูกอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ เมื่อโหลดหน้าแล้วเครื่องมือทำงานต่อโดยไม่ต้องเชื่อมต่อ คุณจึงใช้แบบออฟไลน์ได้ เป็นเครื่องมือสร้าง CSS Grid ในเบราว์เซอร์ที่ใช้งานได้จริงสำหรับนักพัฒนาและวิศวกร DevOps ที่ต้องการพรีวิวการตั้งค่ากริดและคัดลอกค่า CSS ที่ได้
ขั้นตอนที่ 1: ตั้งค่าตัวเลือกกริด รวมคอลัมน์ แถว และค่าระยะห่างที่คุณต้องการใช้
ขั้นตอนที่ 2: เลือกค่า justify และ align ของแต่ละไอเท็มเพื่อควบคุมการจัดวางไอเท็มในกริด
ขั้นตอนที่ 3: ตรวจสอบพรีวิวสดเพื่อดูว่ากริดมีลักษณะอย่างไรขณะปรับการตั้งค่า
ขั้นตอนที่ 4: สร้างบล็อก CSS แล้วคัดลอกค่าที่ต้องการเข้าสไตล์ชีตของคุณ
กรณีการใช้งาน: สร้างค่า CSS Grid พร้อมใช้สำหรับการทดสอบ ฟิกซ์เจอร์ หรือข้อมูล seed แทนการเขียนแต่ละประกาศด้วยตนเอง
กรณีการใช้งาน: สร้างตัวอย่างกริดสำหรับเอกสารหรือเดโม แล้วคัดลอก CSS ที่สร้างเข้าสู่โปรเจกต์ของคุณ
กรณีการใช้งาน: พรีวิวการตั้งค่าคอลัมน์และแถวต่าง ๆ ขณะทำงานบนเลย์เอาต์หน้า
กรณีการใช้งาน: ปรับระยะห่างแบบภาพเพื่อหาค่าระยะห่างที่เหมาะกับต้นแบบ
กรณีการใช้งาน: ตั้งค่า justify และ align ของแต่ละไอเท็มเมื่อเตรียมตัวอย่างที่แสดงการจัดวางไอเท็ม
กรณีการใช้งาน: สร้างบล็อก CSS พร้อมวางเมื่อต้องการค่า grid-template-columns, grid-template-rows, gap และการจัดวางพร้อมกัน