เครื่องมือนี้ใช้ฟรีไหมครับ/คะ?

ครับ/ค่ะ เครื่องมือนี้ฟรี 100% ไม่มีค่าใช้จ่ายแอบแฝง ไม่มีลายน้ำ ไม่จำกัดการใช้งาน

ข้อมูลของฉันปลอดภัยไหม?

ปลอดภัยแน่นอนครับ/ค่ะ ทุกอย่างประมวลผลในเบราว์เซอร์ของคุณโดยตรง ไฟล์ไม่ถูกอัปโหลดไปเซิร์ฟเวอร์ใดๆ

ต้องสร้างบัญชีไหม?

ไม่ต้องสมัครสมาชิกครับ/ค่ะ แค่เปิดเครื่องมือแล้วใช้งานได้เลย

ตัวสร้าง CSS Grid

สร้างเลย์เอาต์ CSS Grid แบบภาพ ตั้งค่าคอลัมน์ แถว ช่องว่าง และการจัดตำแหน่ง ดูตัวอย่างแบบเรียลไทม์และคัดลอกโค้ด CSS ที่พร้อมใช้งาน

คอลัมน์

แถว

ช่องว่างคอลัมน์16px

ช่องว่างแถว16px

justify-items

align-items

justify-content

align-content

จำนวนรายการ6

ผลลัพธ์ CSS

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;

ดูตัวอย่าง

เครื่องมือที่เกี่ยวข้อง

🔒 ผลลัพธ์ทันที เร็วกว่า AI ไม่ต้องสมัคร 100% ส่วนตัว