เกี่ยวกับเครื่องมือนี้
CSS Grid Generator เป็นเครื่องมือฟรีที่ทำงานในเบราว์เซอร์ ซึ่งเปลี่ยนตัวควบคุมสามอย่างที่เรียบง่าย — จำนวนคอลัมน์ จำนวนแถว และช่องว่าง — ให้เป็นเลย์เอาต์ CSS grid ที่พร้อมวาง กำหนดค่า ดูตัวอย่างสดที่วาดใหม่ และคัดลอกกฎที่สร้างขึ้น
คอลัมน์และแถวเป็นจำนวนเต็มตั้งแต่ 1 ถึง 12 (ค่าเริ่มต้น 3 และ 2) และช่องว่างเป็นแถบเลื่อนตั้งแต่ 0 ถึง 40 พิกเซล (ค่าเริ่มต้น 10) ทั้งสองมิติถูกเขียนด้วย repeat() และหน่วย 1fr ดังนั้นทุกแทร็กจึงแบ่งพื้นที่ที่มีอยู่เท่ากัน ตัวอย่างจะเติมแต่ละเซลล์ด้วยบล็อกที่มีหมายเลขและสี เพื่อให้คุณเห็นโครงสร้างแทร็กได้ในพริบตา และเอาต์พุตเป็นกฎ .grid ธรรมดาที่ใช้ display: grid, grid-template-columns, grid-template-rows และ gap คลิกเดียวเพื่อคัดลอกไปยังคลิปบอร์ด
ทุกอย่างทำงานในเบราว์เซอร์ของคุณทั้งหมด ไม่มีการอัปโหลด ไม่มีบัญชี ไม่มีการติดตาม และยังใช้งานออฟไลน์ได้เมื่อโหลดหน้าเสร็จแล้ว