เครื่องมือสร้าง CSS Grid

ยินดีต้อนรับสู่ CSS Grid Generator — เครื่องมือสร้างภาพจำลองแบบอินเทอร์แอกทีฟฟรี ที่เปลี่ยนการคลิกให้เป็นรหัส CSS Grid ที่สะอาดและพร้อมใช้งาน ไม่ว่าคุณกำลังทำโครงร่างเลย์เอาต์ Holy Grail, ตัวต้นแบบแกลเลอรีรูปภาพ หรือเรียนรู้วิธีการทำงานของ grid-template-columns และ grid-area เครื่องมือนี้ให้ตัวอย่างสด การควบคุมขนาดรายแทร็ก และการส่งออกในคลิกเดียว — ไม่ต้องตั้งค่า ไม่ต้องสมัครสมาชิก และไม่ต้องใช้หลังบ้าน

CSS Grid Generator คืออะไร?

เครื่องมือนี้เป็นสนามเด็กเล่นสำหรับเลย์เอาต์สองมิติ คุณกำหนดแถวและคอลัมน์ คลิกเซลล์เพื่อวางรายการ ลากข้ามหลายแทร็ก และดู CSS ที่สร้างขึ้นอัปเดตแบบเรียลไทม์ ต่างจากเครื่องมือสร้างกริดส่วนใหญ่ที่สร้างเพียง grid-template-columns ตัวนี้รองรับการวางรายการรายชิ้น (grid-row / grid-column), การขยายข้ามหลายเซลล์, หมายเลขเส้นกริดแบบเคลื่อนไหวสำหรับผู้เริ่มต้น และพรีเซ็ตที่ผ่านการทดสอบมาแล้ว 6 แบบที่คุณสามารถโหลดได้ทันที

สิ่งที่ทำให้เครื่องมือสร้างนี้แตกต่าง

หน่วย fr ใน CSS Grid หมายถึงอะไร?

หน่วย fr หมายถึงเศษส่วนของพื้นที่ว่างที่มีอยู่ในคอนเทนเนอร์กริด หลังจากหักขนาดที่แน่นอน (px, em, %) ออกแล้ว พื้นที่ที่เหลือจะถูกแบ่งตามสัดส่วนในแทร็ก fr ตัวอย่างเช่น 1fr 2fr 1fr จะทำให้คอลัมน์กลางมีพื้นที่ว่างมากกว่าคอลัมน์อื่นสองเท่า fr เป็นวิธีที่นิยมที่สุดในการสร้างเลย์เอาต์ที่ยืดหยุ่นและได้สัดส่วนที่ตอบสนองต่อขนาดคอนเทนเนอร์โดยไม่ต้องใช้ media queries

CSS Grid ต่างจาก Flexbox อย่างไร?

Flexbox เป็นแบบมิติเดียวและจัดวางรายการตามแกนเดียว (แถวหรือคอลัมน์) CSS Grid เป็นแบบสองมิติและควบคุมแถวและคอลัมน์ในเวลาเดียวกัน ใช้ Flexbox สำหรับแถบนำทาง, กลุ่มปุ่ม หรือการ์ดแถวเดียว ใช้ Grid สำหรับเลย์เอาต์เต็มหน้า, แกลเลอรีรูปภาพ, แดชบอร์ด และงานออกแบบใดๆ ที่คุณต้องการความแม่นยำในการจัดวางทั้งสองแกน UI สมัยใหม่จำนวนมากใช้ทั้งสองอย่างร่วมกัน — Grid สำหรับโครงหน้าหลัก และ Flexbox ภายในเซลล์ย่อย

จะทำให้รายการกริดขยายครอบคลุมหลายเซลล์ได้อย่างไร?

ใช้ grid-column และ grid-row พร้อมคีย์เวิร์ด span หรือหมายเลขเส้นที่ชัดเจน ตัวอย่างเช่น grid-column: span 2 ทำให้รายการกว้างสองคอลัมน์ ในขณะที่ grid-column: 1 / 4 ทำให้ขยายจากเส้นที่ 1 ถึงเส้นที่ 4 grid-row: 2 / span 3 เริ่มที่แถวเส้นที่ 2 และขยายครอบคลุมสามแถว ในเครื่องมือนี้ เพียงคลิกที่รายการใดๆ เพื่อเลือก จากนั้นใช้ปุ่มลูกศรในแผงด้านข้างเพื่อเพิ่มหรือลดการขยายแถวและคอลัมน์ — CSS จะอัปเดตทันที

minmax() ใน CSS Grid คืออะไร?

minmax(min, max) กำหนดขนาดแทร็กที่มีขอบเขตล่างและขอบเขตบน มักใช้คู่กับ auto-fit หรือ auto-fill ใน repeat() เพื่อสร้างกริดที่ตอบสนองได้โดยไม่ต้องใช้ media queries ตัวอย่างเช่น repeat(auto-fit, minmax(200px, 1fr)) จะสร้างคอลัมน์ที่มีขนาดอย่างน้อย 200px ให้มากที่สุดเท่าที่จะพอดีในคอนเทนเนอร์ และยืดออกเพื่อแชร์พื้นที่ที่เหลือเท่าๆ กัน — ซึ่งเป็นรูปแบบมาตรฐานสำหรับเลย์เอาต์การ์ดที่รองรับหลายหน้าจอ

วิธีใช้งานเครื่องมือนี้

1. เลือกพรีเซ็ตเริ่มต้น — คลิกพรีเซ็ตเลย์เอาต์ 6 แบบที่ด้านบนเพื่อโหลดจุดเริ่มต้นที่ใช้ในงานจริง หรือสร้างใหม่เองทั้งหมด
2. ตั้งค่าแถวและคอลัมน์ — ใช้ตัวนับแถวและคอลัมน์เพื่อเพิ่มหรือลดแทร็ก และแก้ไขขนาดแต่ละแทร็กด้วย fr, px, %, auto หรือ minmax()
3. วางและขยายรายการ — คลิกที่เซลล์ว่างใดๆ เพื่อเพิ่มรายการ หรือคลิกรายการที่มีอยู่เพื่อเลือกและใช้ปุ่มลูกศรเพื่อเปลี่ยนการขยายแถว/คอลัมน์
4. ปรับช่องว่างและการจัดตำแหน่ง — กำหนดช่องว่างแถวและคอลัมน์ด้วยตัวเลื่อน และเลือก justify-items และ align-items จากเมนูแบบเลื่อนลง
5. เปิดเลเยอร์เส้นกริด — เปิดหมายเลขเส้นกริดเพื่อดูว่าเส้น 1, 2, 3 อยู่ตรงไหน — เหมาะสำหรับการเรียนรู้เรื่องการจัดวาง
6. คัดลอกหรือดาวน์โหลด — สลับระหว่างแท็บ CSS และ HTML จากนั้นคลิก คัดลอก หรือ ดาวน์โหลด เพื่อรับรหัสที่สร้างขึ้น

พรีเซ็ตในตัว 6 แบบ

กรณีการใช้งานจริง

สำหรับนักพัฒนา Frontend

• สร้างโครงหน้าต้นแบบอย่างรวดเร็วก่อนเขียนรหัสคอมโพเนนต์
• สร้างโค้ด repeat(auto-fit, minmax()) สำหรับกริดการ์ดที่รองรับหลายหน้าจอ
• ทดสอบ grid-template-areas ด้วยสายตาก่อนลงมือเขียนโครงสร้างจริง
• ส่งออกทั้ง CSS ของคอนเทนเนอร์และโครงสร้าง HTML ที่สอดคล้องกันไปพร้อมกัน

สำหรับนักออกแบบและผู้เริ่มศึกษา

• ดูพฤติกรรมที่แท้จริงของ fr, auto และ minmax() ผ่านตัวอย่างสด
• เปิดหมายเลขเส้นกริดเพื่อทำความเข้าใจการวางตามเส้น (line-based placement)
• ทดลองกับค่าการขยาย (span) โดยไม่ต้องเขียนโค้ด
• เปรียบเทียบพรีเซ็ตต่างๆ เพื่อเรียนรู้รูปแบบกริดที่เป็นมาตรฐาน

สำหรับครูผู้สอนและบล็อกเกอร์

• สาธิตแนวคิดเกี่ยวกับกริดในการเวิร์กช็อปด้วยเลเยอร์แสดงผลด้วยสายตา
• สร้างตัวอย่างรหัสที่สะอาดสำหรับบทช่วยสอนในเวลาเพียงไม่กี่วินาที
• แสดงวิธีที่โครงสร้าง CSS Grid เดียวกันปรับขนาดจาก 4 เป็น 12 คอลัมน์

เคล็ดลับสำหรับ CSS Grid ที่สะอาดขึ้น

• ใช้ fr แทน % — fr จะคำนึงถึงช่องว่าง (gap) ในขณะที่ % ไม่ทำเช่นนั้น ดังนั้นกริดที่ใช้ % อาจล้นได้
• ใช้ grid-template-areas สำหรับภูมิภาคที่ตั้งชื่อ — อ่านง่ายกว่าหมายเลขเส้นมาก และอธิบายโครงสร้างในตัว
• ใช้ minmax() ร่วมกับ auto-fit สำหรับกริดที่รองรับการตอบสนองโดยไม่ต้องใช้ media queries
• กำหนดช่องว่างที่ชัดเจน ด้วย gap: 1rem แทนการใช้ margin บนรายการ — ช่องว่างจะไม่ยุบตัวและไม่ต้องคอยล้างค่า
• ผสมผสาน Grid และ Flexbox — ใช้ Grid สำหรับโครงร่างหน้า และ Flexbox ภายในเซลล์ อย่าพยายามใช้เครื่องมือเดียวทำทุกอย่าง

คำถามที่พบบ่อย

เครื่องมือสร้างนี้รองรับ grid-template-areas หรือไม่?

พรีเซ็ต Holy Grail จะใช้ grid-template-areas ใน CSS ที่ส่งออก ส่วนพรีเซ็ตอื่นๆ เราใช้การจัดวางตามเส้น (grid-column / grid-row) เนื่องจากมีความยืดหยุ่นมากกว่าเมื่อคุณคลิกและจัดเรียงรายการใหม่

ฉันสามารถส่งออก HTML ได้ด้วยหรือไม่?

ได้ — เพียงสลับไปที่แท็บ HTML ในแผงส่งออกเพื่อคัดลอกโครงสร้าง HTML ที่พร้อมใช้งานซึ่งตรงกับ CSS ที่สร้างขึ้นอย่างสมบูรณ์

CSS ที่สร้างขึ้นจะทำงานในเบราว์เซอร์เก่าได้หรือไม่?

CSS Grid ได้รับการรองรับในเบราว์เซอร์หลักทั้งหมด (Chrome, Edge, Firefox, Safari) และ IE11 แบบจำกัดบางส่วน สำหรับเบราว์เซอร์สมัยใหม่ไม่จำเป็นต้องมีแผนสำรอง (fallback) หากคุณต้องรองรับ IE11 ให้เลือกใช้การวางตามเส้น (ไม่ใช้ gap, minmax(), หรือ repeat(auto-fit)) และทดสอบอย่างละเอียด

ข้อมูลเครื่องมือถูกเก็บไว้ในเบราว์เซอร์ของฉันหรือไม่?

ทุกอย่างทำงานบนฝั่งไคลเอนต์ใน JavaScript ไม่มีการส่งข้อมูลใดๆ ไปยังเซิร์ฟเวอร์ ดังนั้นเลย์เอาต์ ชื่อรายการ และการตั้งค่าของคุณจึงเป็นส่วนตัวอยู่ในเครื่องของคุณ

ใช้งานบนมือถือได้หรือไม่?

ได้ — ตัวสร้างจะปรับรูปแบบเป็นคอลัมน์เดียวบนโทรศัพท์ ส่วนควบคุมสามารถแตะได้ และตัวอย่างภาพยังคงตอบสนองบนหน้าจอสัมผัส

แหล่งข้อมูลเพิ่มเติม

• CSS Grid Layout - MDN Web Docs
• CSS Grid Layout Module Level 2 - ข้อกำหนดของ W3C
• CSS Grid Layout - Wikipedia