เครื่องมือสร้าง CSS Grid
สร้างเลย์เอาต์ CSS Grid ด้วยตัวแก้ไขแบบภาพ ปรับแต่งคอลัมน์ แถว ช่องว่าง และเทมเพลต เครื่องมือสร้าง CSS Grid ฟรี
Loading tool...
เครื่องมือสร้าง CSS Grid คืออะไร?
CSS Grid generator สร้าง layouts สองมิติที่ซับซ้อนผ่านอินเทอร์เฟซแบบภาพ กำหนดแถว คอลัมน์ ช่องว่าง และการวาง item สร้าง CSS code ที่ต้องการสำหรับ responsive grid layouts สมัยใหม่
ประโยชน์หลัก
- ออกแบบ layout แบบภาพ
- รองรับ responsive grid
- ตั้งค่าช่องว่าง
- CSS พร้อมคัดลอก
กรณีการใช้งาน
- •page layouts
- •แกลเลอรีรูปภาพ
- •dashboard grids
- •magazine layouts
วิธีสร้าง CSS Grid
- ตั้งมิติ grid: ระบุจำนวนคอลัมน์และแถวสำหรับ grid ของคุณ
- ตั้งค่าช่องว่าง: ตั้งช่องว่างระหว่าง grid items โดยใช้ slider
- ปรับขนาดคอลัมน์/แถว: ตั้งขนาดโดยใช้ fr, px, % หรือ auto สำหรับแต่ละ track
- คัดลอก grid CSS: คัดลอก grid CSS ที่สร้างขึ้นสำหรับ container และ items ของคุณ
คุณสมบัติหลัก
- สร้าง CSS Grid layout แบบภาพ
- กำหนด rows และ columns ด้วยหน่วยใดก็ได้
- ควบคุม gap และ alignment
- วาง items ด้วยการลาก
- รองรับ named grid areas
- คัดลอก CSS Grid code ครบถ้วน
คำถามที่พบบ่อย
CSS Grid คืออะไร?
CSS Grid เป็นระบบ layout สำหรับสร้าง grid layouts ที่ซับซ้อนและ responsive ช่วยควบคุมแถว คอลัมน์ ช่องว่าง และการวางไอเท็มในสองมิติอย่างแม่นยำ
ความแตกต่างระหว่าง Grid และ Flexbox คืออะไร?
Grid สำหรับ layouts สองมิติ (แถวและคอลัมน์) Flexbox สำหรับ layouts หนึ่งมิติ (แถวหรือคอลัมน์) ใช้ Grid สำหรับ page layouts, Flexbox สำหรับ component layouts
สร้างคอลัมน์เท่ากันได้อย่างไร?
ใช้ "grid-template-columns: repeat(3, 1fr)" สำหรับ 3 คอลัมน์เท่ากัน หน่วย "fr" กระจายพื้นที่ที่มีอยู่ตามสัดส่วน
ตั้งชื่อ grid lines และ areas ได้ไหม?
ได้ ตั้งชื่อ lines ด้วย [name] syntax และ areas ด้วย grid-template-areas named areas ทำให้ layouts อ่านง่ายและบำรุงรักษาง่ายกว่า