สร้าง CSS Grid และ Flexbox
สลับไปมาระหว่าง Grid และ Flexbox ปรับจำนวนคอลัมน์และแถว หรือทิศทางและการจัดวางของ flex items รวมถึงระยะห่างระหว่างกัน พร้อมภาพตัวอย่างกล่องสีสดใสภายในคอนเทนเนอร์แบบเรียลไทม์ จากนั้นคัดลอกโค้ด CSS ที่ถูกต้องไปใช้
เครื่องมือออกแบบและ CSS ทำงานในเบราว์เซอร์ของคุณทั้งหมด
การประมวลผลทั้งหมดเกิดขึ้นบนอุปกรณ์ของคุณ — ไม่มีการส่งข้อมูลใดๆ ไปยังเซิร์ฟเวอร์
1
2
3
4
5
6
โค้ด CSS
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px;
ดำเนินการต่อด้วย
เครื่องมือที่เกี่ยวข้อง
อยากลองใช้ Uddatak ไหม?
เรียกดูคลังเครื่องมือทั้งหมดและเริ่มใช้งานสิ่งที่คุณต้องการได้ทันที — ฟรีและไม่ต้องสมัครสมาชิก
ดูเครื่องมือทั้งหมด