ตัวสร้างเลย์เอาต์ 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 ที่ครบในตัว
คำถามที่พบบ่อย
เลย์เอาต์ bento grid คืออะไร?
bento grid คือเลย์เอาต์แบบกระเบื้องสไตล์กล่องเบนโตะ ที่เซลล์มีความกว้างและสูงต่างกันจัดเรียงในกริดสะอาด ๆ ซึ่งได้รับความนิยมจาก keynote ของ Apple และ landing page ยุคใหม่
ตัวสร้าง export โค้ดอะไร?
HTML snippet ที่ครบในตัว: div ครอบ class bento-grid, div ลูกหนึ่งตัวต่อเซลล์พร้อม inline style สำหรับ grid-column, grid-row และสีพื้นหลัง บวก style block เล็ก ๆ สำหรับกริด gap และมุมโค้ง
span ใน CSS ที่ได้ทำงานอย่างไร?
แต่ละเซลล์ใช้ grid-column: span N และ grid-row: span M ภายใน grid-template-columns แบบ repeat เซลล์จึงยืดคร่อมหลาย track ขณะที่กริดจัดวางอัตโนมัติ
เอาผลลัพธ์ไปใช้กับ React, Vue หรือ HTML ธรรมดาได้หรือไม่?
ได้ snippet เป็น HTML และ CSS ล้วน วางลง framework ใดก็ได้แบบ markup ดิบ หรือย้าย inline style เข้า component ของคุณเอง