ตัวสร้าง CSS Grid
CSS Grid Generator สร้างเลย์เอาต์ grid จากจำนวนคอลัมน์และแถว ระยะ gap ค่า grid-template ที่กำหนดเอง (ไม่บังคับ) และการจัดตำแหน่งรายการ พร้อมพรีวิวแบบเรียลไทม์และ CSS ที่พร้อมคัดลอก
เกี่ยวกับเครื่องมือนี้
CSS Grid Generator สร้างเลย์เอาต์ grid จากจำนวนคอลัมน์และแถว ระยะ gap ค่า grid-template ที่กำหนดเอง (ไม่บังคับ) และการจัดตำแหน่งรายการ พร้อมพรีวิวแบบเรียลไทม์และ CSS ที่พร้อมคัดลอก
วิธีใช้
- กำหนดจำนวนคอลัมน์และแถว
- ปรับ gap ของคอลัมน์และแถว
- ใส่ template ที่กำหนดเอง เช่น 200px 1fr 1fr (ไม่บังคับ)
- เลือก justify-items และ align-items แล้วคลิก Copy CSS
ข้อควรรู้
- หน่วย fr แบ่งพื้นที่ว่าง: 1fr 2fr ทำให้คอลัมน์ที่สองกว้างเป็นสองเท่าของคอลัมน์แรก
- repeat(3, 1fr) คือรูปย่อของสามคอลัมน์ที่กว้างเท่ากัน
- column-gap และ row-gap กำหนดระยะห่างระหว่าง track
- Grid เป็นแบบสองมิติ ควบคุมทั้งแถวและคอลัมน์ไปพร้อมกัน
- repeat(auto-fit, minmax(200px, 1fr)) สร้าง grid แบบ responsive ได้โดยไม่ต้องใช้ media query
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
สร้าง grid 3 คอลัมน์ใน CSS อย่างไร?
ใช้ display: grid; grid-template-columns: repeat(3, 1fr); กับ container แล้วเพิ่ม gap เพื่อเว้นระยะ
fr ใน CSS Grid หมายถึงอะไร?
fr คือสัดส่วนของพื้นที่ว่างที่เหลืออยู่ใน grid container
CSS Grid หรือ Flexbox ดี?
Grid เหมาะกับเลย์เอาต์สองมิติ เช่น โครงหน้าเว็บและตารางการ์ด ส่วน Flexbox เหมาะกับแถวหรือคอลัมน์มิติเดียว
ทำ grid แบบ responsive โดยไม่ใช้ media query ได้อย่างไร?
ใช้ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); คอลัมน์จะขึ้นบรรทัดใหม่เองตามพื้นที่ที่มี