ตัวสร้าง CSS Masonry Layout
สร้าง masonry layout ฟรีด้วย CSS ล้วน grid-template-rows: masonry หรือ fallback multi-column ปรับคอลัมน์ ช่องว่าง และจำนวนการ์ด พร้อมพรีวิวสดและคัดลอก HTML/CSS ไม่ต้องใช้ JavaScript
Loading tool...
ตัวสร้าง CSS Masonry Layout คืออะไร?
CSS Masonry Layout Generator สร้างผนังการ์ดสไตล์ Pinterest ด้วย CSS ล้วน โหมดใหม่ใช้ grid-template-rows: masonry พร้อม fallback multi-column อัตโนมัติสำหรับเบราว์เซอร์เก่า โหมด fallback ใช้ column-count กับ break-inside: avoid ปรับคอลัมน์ ช่องว่าง และจำนวนการ์ดได้ทั้งหมด พรีวิวสดแสดงการ์ดสูงต่ำไม่เท่ากันเหมือนหน้าจริง และ HTML กับ CSS คัดลอกออกมาเป็น snippet ครบชุดโดยไม่ต้องใช้ JavaScript
ประโยชน์หลัก
- การจัดแน่นสไตล์ Pinterest โดยไม่ต้องอาศัยแถวสูงเท่ากัน
- ใช้ได้จริงทุกเบราว์เซอร์วันนี้ด้วย fallback multi-column
- ไม่ต้องพึ่งไลบรารี masonry ใช้ CSS ล้วนไม่กี่บรรทัด
- ปรับคอลัมน์และช่องว่างแบบเห็นภาพพร้อมฟีดแบ็กสด
- ผลลัพธ์วางใน HTML ล้วน, React หรือ Vue ได้ทันที
กรณีการใช้งาน
- •แกลเลอรีรูปและผลงานที่ภาพสูงต่ำไม่เท่ากัน
- •กริดการ์ดบล็อกที่บทสรุปยาวสั้นต่างกัน
- •บอร์ดวิดเจ็ต dashboard ที่ต้องจัดแน่น
- •หน้ารายการสินค้าที่ภาพสัดส่วนไม่เท่ากัน
- •เรียนรู้ความต่างของ CSS masonry แท้กับ fallback
วิธีสร้าง CSS masonry layout
- ตั้งค่า layout: เลือกจำนวนคอลัมน์ ช่องว่าง และจำนวนการ์ด พรีวิวจะเรนเดอร์ใหม่ทันทีด้วยความสูงการ์ดที่ต่างกัน
- เลือกโหมด: โหมดใหม่ใช้ grid-template-rows: masonry พร้อม fallback แบบ @supports ส่วนโหมด fallback ใช้ CSS multi-column ที่ใช้ได้ทุกเบราว์เซอร์
- คัดลอกโค้ด: คัดลอก HTML กับ CSS แยกกัน แล้ววางลงโปรเจกต์ layout เองไม่ต้องใช้ JavaScript หรือไลบรารีใด
คุณสมบัติหลัก
- โหมด grid-template-rows: masonry ใหม่พร้อม fallback @supports
- โหมด fallback column-count ใช้ได้ทุกเบราว์เซอร์
- ปรับคอลัมน์ ช่องว่าง และจำนวนการ์ดได้
- พรีวิวสดการ์ดสูงต่ำไม่เท่ากันเหมือนหน้าจริง
- ปุ่มคัดลอกแยก HTML และ CSS