CSS Grid Generator
Build CSS Grid layouts visually.
1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
column-gap: 16px;
row-gap: 16px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
}เกี่ยวกับเครื่องมือนี้
CSS Grid Layout Generator ช่วยให้คุณออกแบบเลย์เอาต์กริดสองมิติแบบวิชวลโดยปรับ grid-template-columns, grid-template-rows, คุณสมบัติ gap และการตั้งค่าการจัดแนว ตัวอย่างสดแสดงผลลัพธ์ก่อนเขียนโค้ด
CSS Grid คือระบบเลย์เอาต์ที่ทรงพลังที่สุดใน CSS ออกแบบมาสำหรับเลย์เอาต์สองมิติ (แถวและคอลัมน์พร้อมกัน) เสริม Flexbox ที่จัดการเลย์เอาต์หนึ่งมิติ
วิธีใช้งาน
- กำหนด grid-template-columns เพื่อกำหนดโครงสร้างคอลัมน์ ใช้ปุ่มพรีเซ็ตสำหรับรูปแบบทั่วไป
- ตั้งค่า grid-template-rows ตามต้องการ (ทิ้งไว้เป็น auto สำหรับเลย์เอาต์ส่วนใหญ่)
- ปรับ column-gap และ row-gap สำหรับระยะห่าง
- ใช้ justify-items และ align-items ควบคุมการวางรายการในเซลล์
- เปลี่ยนจำนวนรายการด้วยแถบเลื่อนเพื่อดูการตอบสนองของกริด
- คลิกคัดลอกเพื่อคัดลอก CSS ที่สร้าง
กรณีการใช้งาน
นักพัฒนา front-end ใช้ CSS Grid สำหรับเลย์เอาต์หน้า โครงสร้าง dashboard และแกลเลอรีรูปภาพ นักออกแบบส่งออกข้อกำหนดกริดเป็น CSS ที่แม่นยำให้นักพัฒนา ทีม design system ใช้สร้างต้นแบบรูปแบบระยะห่างและคอลัมน์
คำถามที่พบบ่อย
- 1fr หมายความว่าอะไร? — fr เป็นหน่วยเศษส่วน 1fr หมายถึงหนึ่งส่วนของพื้นที่ที่มี repeat(3, 1fr) สร้างสามคอลัมน์เท่าๆ กัน
- ควรใช้ Grid หรือ Flexbox เมื่อใด? — ใช้ Grid สำหรับเลย์เอาต์สองมิติ (แถวและคอลัมน์) ใช้ Flexbox เมื่อจัดเรียงรายการในทิศทางเดียว
- CSS Grid รองรับทุกเบราว์เซอร์หรือไม่? — ใช่ CSS Grid รองรับเต็มรูปแบบในทุกเบราว์เซอร์สมัยใหม่ตั้งแต่ปี 2017