ListFan
ออกแบบ · ฟรี

สร้าง CSS Grid

สร้างตัวอย่างกริดและ CSS จากคอลัมน์ แถว และระยะห่าง

01กรอกค่า

ทำงานในเบราว์เซอร์
ตัวอย่าง
px

02สร้าง CSS Grid

ทำงานในเบราว์เซอร์

วิธีใช้งาน

สร้างตัวอย่างกริดและ CSS จากคอลัมน์ แถว และระยะห่าง

ทำงานในเบราว์เซอร์

ข้อมูลอยู่กับคุณ

ข้อมูลประมวลผลในหน้านี้และไม่ส่งไปยังเซิร์ฟเวอร์

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

สร้างตัวอย่างกริดและ CSS จากคอลัมน์ แถว และระยะห่าง

สร้าง CSS Grid คอลัมน์เท่ากันแล้วปรับโค้ดใช้กับหน้าเว็บ

ใช้เครื่องมือ ↑

วิธีใช้

  1. กรอกค่า

    คอลัมน์ · แถว · ระยะห่าง

  2. คำนวณ / สร้าง

    สร้างตัวอย่างกริดและ CSS จากคอลัมน์ แถว และระยะห่าง

  3. ผลลัพธ์

    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

วิธีคำนวณ

สร้าง CSS Grid คอลัมน์เท่ากันแล้วปรับโค้ดใช้กับหน้าเว็บ

ตัวอย่าง

สร้าง CSS Grid

คอลัมน์
3
แถว
2
ระยะห่าง
16 px
ผลลัพธ์
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

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

ควรตีความผลอย่างไร?

สร้าง CSS Grid คอลัมน์เท่ากันแล้วปรับโค้ดใช้กับหน้าเว็บ

ข้อมูลส่งไปที่ไหน?

คำนวณบนอุปกรณ์ของคุณ ไม่ส่งข้อมูลไปยังเซิร์ฟเวอร์