Layout Generator — Grid & Flex
สร้างโครงสร้าง HTML/CSS สำหรับเลย์เอาต์ยอดนิยม (CSS Grid & Flexbox) พร้อมพรีวิวและปุ่มคัดลอกโค้ด
Toggle Theme
Export .zip
ชนิดเลย์เอาต์
CSS Grid
Flexbox
จำนวนคอลัมน์ (Grid / Flex basis)
จำนวนแถว (Grid เท่านั้น)
จำนวนกล่อง (Item)
ช่องว่าง (gap)
px
rem
%
ความกว้างสูงสุดของคอนเทนเนอร์
px
%
rem
Padding ภายในคอนเทนเนอร์
px
rem
รูปแบบคอลัมน์ (Grid)
คอลัมน์เท่ากัน (repeat)
auto-fill minmax
auto-fit minmax
กำหนดเอง
minmax สำหรับ auto-fill/fit (เช่น 160px, 1fr)
กำหนดคอลัมน์เอง (Grid) — เช่น 200px 1fr 2fr
Flex ตัวเลือก
wrap
justify: start
justify: center
justify: space-between
justify: space-around
justify: space-evenly
align: stretch
align: start
align: center
align: end
อัปเดตพรีวิว & โค้ด
Preview
ลากขยายพื้นที่ได้ — โค้ดจะอัปเดตตามตัวเลือกด้านบน
HTML
คัดลอก
CSS
คัดลอก