UTILS.
ทำงานในเบราว์เซอร์ 100%

ตัวสร้าง CSS Grid

สร้างเลย์เอาต์ CSS grid ที่ปรับจำนวนคอลัมน์ แถว และระยะห่างได้ พร้อมพรีวิวแบบเรียลไทม์

เกี่ยวกับเครื่องมือนี้

กำหนดจำนวนคอลัมน์และแถวพร้อมระยะห่างเพื่อสร้าง CSS grid แล้วคัดลอกโค้ด ทั้งหมดทำงานในเบราว์เซอร์ของคุณ

คำถามที่พบบ่อย

ขนาดของแทร็กถูกกำหนดอย่างไร?
คอลัมน์และแถวใช้ repeat() ร่วมกับ 1fr จึงแบ่งพื้นที่ที่มีอยู่อย่างเท่ากัน
ตัวควบคุมระยะห่าง (gap) คืออะไร?
มันกำหนดระยะห่างของ grid เป็นพิกเซลระหว่างทุกเซลล์ และมีผลกับพรีวิวแบบเรียลไทม์

เครื่องมือเพิ่มเติม