เครื่องกำเนิดตาราง CSS
กำหนดคอลัมน์ แถว และช่องว่างด้วยสายตา จากนั้นคัดลอกโค้ดเทมเพลต CSS Grid สำหรับเลย์เอาต์ของคุณ
CSS Grid Generator
Live1
2
3
4
5
6
7
8
9
CSS output
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px;
Key capabilities
- กำหนดคอลัมน์ แถว และช่องว่างด้วยสายตา จากนั้นคัดลอกโค้ดเทมเพลต CSS Grid
- ทำงานในเบราว์เซอร์ของคุณ
- ใช้งานได้ฟรี
วิธีใช้
- กำหนดจำนวนคอลัมน์และแถว
- ปรับช่องว่างและขนาดแทร็ก
- คัดลอก CSS ของกริด
How this tool works
- กำหนดจำนวนคอลัมน์และแถว
- ปรับช่องว่างและขนาดแทร็ก
- คัดลอก CSS ของกริด
Recommended settings
- ใช้ตัวเลือกเริ่มต้นก่อน จากนั้นจึงปรับเปลี่ยนหากจำเป็น
Supported formats
Text / on-page input
File size and limits
- การดูตัวอย่างหลายเลเยอร์ที่ซับซ้อนมากอาจรู้สึกช้าลงในโทรศัพท์รุ่นเก่า
Privacy
ตัวสร้างสีและ CSS ทำงานทั้งหมดในเบราว์เซอร์ของคุณ การดูตัวอย่างและการแปลงไม่เคยอัปโหลดสไตล์ของคุณ
Common use cases
- ใช้ CSS Grid Generator ทุกครั้งที่คุณต้องการ: กำหนดคอลัมน์ แถว และช่องว่างด้วยภาพ จากนั้นคัดลอกโค้ดเทมเพลต CSS Grid
Troubleshooting
การแสดงตัวอย่างดูแตกต่างออกไปหลังจากวาง
ตรวจสอบ CSS ที่แข่งขันกันบนเพจของคุณ (รีเซ็ต, สีที่สืบทอดมา) คัดลอกกฎที่สร้างขึ้นลงในสไตล์ชีตแบบแยกก่อน
คำถามที่พบบ่อย
สิ่งนี้อัปโหลด CSS ของฉันหรือไม่
ไม่ ตัวสร้างและตัวแปลงทำงานในเบราว์เซอร์ของคุณพร้อมการแสดงตัวอย่างแบบสด
ฉันจำเป็นต้องมีบัญชีหรือไม่?
ไม่ เปิดเครื่องมือ ปรับแต่งการควบคุม และคัดลอก CSS
เครื่องมือที่เกี่ยวข้อง
Flexbox Generator
Experiment with flex direction, wrap, justify, and align — see layouts update live.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolBox Shadow Generator
Design layered box-shadows with offset, blur, spread, and color — live preview included.
Open tool