ตัวสร้างเลย์เอาต์ Bento Grid
สร้างเลย์เอาต์ bento grid สไตล์ Apple ออนไลน์ฟรี กำหนด column และ row span รายเซลล์ พรีวิวสด ปรับ gap และมุมโค้ง พร้อมคัดลอก HTML ใช้ได้ทันที ไม่ต้องอัปโหลด
Loading tool...
ตัวสร้างเลย์เอาต์ Bento Grid คืออะไร?
ตัวสร้าง Bento Grid สร้างเลย์เอาต์กระเบื้องสไตล์ Apple ด้วย CSS Grid ได้โดยตรงในเบราว์เซอร์ แต่ละเซลล์ขยายคร่อมหลายคอลัมน์และแถวได้เพื่อลุค bento ไม่สมมาตร พร้อมพรีวิวสด จำนวนคอลัมน์ gap และมุมโค้งที่ปรับได้ และ HTML snippet พร้อม style block ที่คัดลอกไปใช้ได้ทันที
ประโยชน์หลัก
- ออกแบบ bento ด้วยสายตา โดยไม่ต้องเขียนคำนวณกริดเอง
- span ไม่สมมาตรรายเซลล์ ตั้งแต่ hero เต็มความกว้างถึงกระเบื้องเล็ก
- พรีวิวสดที่ตรงกับโค้ดที่ export เสมอ
- ผลลัพธ์ HTML และ CSS สะอาดครบในตัว
- เป็นส่วนตัวและทันที - ทุกอย่างทำงานในเบราว์เซอร์
กรณีการใช้งาน
- •ออกแบบ hero section ของแดชบอร์ดและ feature grid
- •สร้างเลย์เอาต์การ์ดสำหรับ portfolio และ landing page
- •โปรโตไทป์สไลด์ภาพรวมสไตล์ keynote
- •สร้าง CSS เริ่มต้นสำหรับส่วนราคาหรือสถิติแบบกระเบื้อง
วิธีสร้างเลย์เอาต์ Bento Grid
- ตั้งฐานกริด: เลือกจำนวนคอลัมน์ gap และมุมโค้งของกริดทั้งหมด
- จัดรูปทรงเซลล์: กำหนด column span row span และสีพาสเทลของแต่ละเซลล์ เพิ่มหรือลบเซลล์ได้อิสระ
- ดูพรีวิวสด: พรีวิวจะเรียงเซลล์ตรงกับโค้ด CSS Grid ที่ export ทุกประการ
- คัดลอกโค้ด: คัดลอก HTML พร้อม style block หรือดาวน์โหลดเป็นไฟล์ HTML แล้ววางลงโปรเจกต์ของคุณ
คุณสมบัติหลัก
- เลย์เอาต์สไตล์ bento กำหนด column และ row span รายเซลล์
- พรีวิวสดที่ตรงกับโค้ดที่ export เสมอ
- ปรับจำนวนคอลัมน์ gap และมุมโค้งได้
- พาเลตต์พาสเทลเลือกสีรายเซลล์
- เพิ่ม ลบ และรีเซ็ตเซลล์ได้ในคลิกเดียว
- คัดลอก HTML พร้อม style block ที่ครบในตัว