การทำงานของเครื่องมือสร้าง CSS Grid
เครื่องมือสร้าง CSS Grid ช่วยให้คุณออกแบบเลย์เอาต์กริดในรูปแบบภาพได้อย่างรวดเร็ว โดยการกำหนดจำนวนคอลัมน์และแถว กำหนดขนาดของแต่ละช่อง และระบุระยะห่างระหว่างช่อง คุณสามารถลากเมาส์ผ่านช่องตารางเพื่อวางไอเทมลงในเลย์เอาต์ได้โดยตรง จากนั้นเครื่องมือจะสร้างโค้ด CSS และ HTML ที่สอดคล้องกันโดยอัตโนมัติ เพื่อให้คุณคัดลอกและนำไปวางในโปรเจกต์ของคุณได้ทันที
การประมวลผลทั้งหมดเกิดขึ้นภายในเครื่องของคุณ โดยกริดของคุณจะถูกสร้างขึ้นในเบราว์เซอร์โดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo
การกำหนดค่าอินพุตและข้อจำกัด
ในการออกแบบเลย์เอาต์ คุณสามารถปรับแต่งค่าต่างๆ ผ่านอินเตอร์เฟสได้ดังนี้:
- คอลัมน์: กำหนดจำนวนได้ตั้งแต่ 1 ถึง 12 คอลัมน์
- แถว: กำหนดจำนวนได้ตั้งแต่ 1 ถึง 12 แถว
- ระยะห่างคอลัมน์: กำหนดค่าได้ตั้งแต่ 0 ถึง 48px
- ระยะห่างแถว: กำหนดค่าได้ตั้งแต่ 0 ถึง 48px
- ขนาดคอลัมน์ และ ขนาดแถว: รองรับค่า CSS grid ที่ถูกต้องทุกรูปแบบ เช่น
1fr,200px,auto,min-contentหรือminmax(120px, 1fr) - การวางไอเทม: ทำได้โดยการกดและลากเมาส์ผ่านช่องตารางเพื่อกำหนดพื้นที่สี่เหลี่ยม
เครื่องมือนี้รองรับการวางไอเทมได้สูงสุด 16 ไอเทม หากคุณกรอกค่าที่ไม่ถูกต้องสำหรับขนาดของแทร็ก (เช่น not-a-grid-track) ช่องกรอกข้อมูลนั้นจะถูกทำเครื่องหมายว่าไม่ถูกต้อง แต่โค้ด CSS ที่ส่งออกจะยังคงรักษาค่าที่ถูกต้องล่าสุดเอาไว้
รูปแบบโค้ดที่ส่งออกและกฎการทำงาน
เมื่อคุณจัดวางเลย์เอาต์เสร็จสิ้น เครื่องมือจะสร้างผลลัพธ์สองส่วนคือ CSS และ HTML โดยมีกฎการทำงานและเงื่อนไขดังนี้:
- การสร้างไอเทม: เมื่อปล่อยเมาส์จากการลากผ่านช่องตาราง จะเกิดไอเทมลูกที่ครอบคลุมคอลัมน์และแถวที่เลือก ไอเทมแต่ละชิ้นจะได้รับกฎ
grid-columnและgrid-rowของตัวเองใน CSS และมีแท็กdivที่ตรงกันใน HTML - การซ้อนทับ: ไอเทมสามารถวางซ้อนทับกันได้ โดยไอเทมที่วาดทีหลังจะอยู่ด้านบนสุด
- การลบไอเทม: คุณสามารถคลิกเครื่องหมาย "×" บนไอเทมเพื่อลบออกได้ หรือใช้ปุ่ม "ล้างไอเทมทั้งหมด" เพื่อทำให้คอนเทนเนอร์ HTML ว่างเปล่าและรีเซ็ตจำนวนไอเทมเป็น 0 นอกจากนี้ยังมีปุ่ม "เพิ่มไอเทม" สำหรับสร้างไอเทม HTML เพิ่มเติม
- การยุบรวมโค้ด: แทร็ก (คอลัมน์หรือแถว) ที่ใช้ขนาดเดียวกันจะถูกยุบรวมเป็นฟังก์ชัน
repeat()ในโค้ด CSS และหากระยะห่างคอลัมน์กับระยะห่างแถวมีค่าเท่ากัน คุณสมบัติทั้งสองจะถูกยุบรวมเหลือเพียงคุณสมบัติgapตัวเดียวใน CSS
การใช้งานพรีเซ็ตเลย์เอาต์สำเร็จรูป
เครื่องมือมีพรีเซ็ตเลย์เอาต์สำเร็จรูปให้เลือกใช้งานเพื่อความรวดเร็ว ได้แก่:
- แถบข้าง (Sidebar)
- ส่วนหัวและส่วนท้าย (Header & footer)
- แกลเลอรี (Gallery): พรีเซ็ตนี้จะสร้างคอลัมน์ 3 คอลัมน์ แถว 2 แถว และไอเทม 3 ชิ้นโดยอัตโนมัติ
- แดชบอร์ด (Dashboard)
คำถามที่พบบ่อย (FAQ)
จะวางไอเทมลงบนกริดได้อย่างไร? กดและลากเมาส์ผ่านช่องตารางเพื่อกำหนดพื้นที่สี่เหลี่ยม เมื่อปล่อยเมาส์ พื้นที่นั้นจะกลายเป็นไอเทมลูกที่วางอยู่บนคอลัมน์และแถวเหล่านั้น ไอเทมแต่ละชิ้นที่คุณวาดจะได้รับกฎ grid-column และ grid-row ของตัวเองใน CSS และมีแท็ก div ที่ตรงกันใน HTML ไอเทมสามารถซ้อนทับกันได้ โดยชิ้นที่วาดทีหลังจะอยู่ด้านบน และคุณสามารถคลิกเครื่องหมาย × บนไอเทมเพื่อลบออกได้
คอลัมน์และแถวสามารถมีขนาดแตกต่างกันได้หรือไม่? ได้แน่นอน แต่ละแทร็กจะมีช่องกำหนดขนาดของตัวเอง ซึ่งคุณสามารถกรอกค่ากริดใดก็ได้ เช่น 1fr, 200px, auto, min-content หรือ minmax(120px, 1fr) แทร็กที่มีขนาดเท่ากันจะถูกยุบรวมเป็นฟังก์ชัน repeat() เพื่อให้โค้ดสั้นลง ส่วนระยะห่างคอลัมน์และแถวจะถูกตั้งค่าแยกกัน และจะยุบรวมเป็น gap ตัวเดียวเมื่อมีค่าเท่ากัน
ต้องทำอย่างไรกับโค้ดที่สร้างขึ้น? คัดลอกทั้งโค้ด CSS และ HTML ไปใช้งานร่วมกัน โดย HTML จะให้โครงสร้างคอนเทนเนอร์ที่มี div หนึ่งตัวต่อหนึ่งไอเทม และ CSS จะทำหน้าที่กำหนดรูปแบบกริดและระบุตำแหน่งของแต่ละไอเทม เมื่อนำทั้งสองส่วนไปวางในโปรเจกต์ของคุณ คุณจะได้เลย์เอาต์ที่ตรงตามที่คุณวาดไว้ที่นี่ทุกประการ
สามารถกำหนดระยะห่างระหว่างคอลัมน์และแถวให้ไม่เท่ากันได้หรือไม่?
ได้ คุณสามารถกำหนดค่าระยะห่างคอลัมน์และระยะห่างแถวแยกจากกันได้อย่างอิสระตั้งแต่ 0 ถึง 48px โดยในโค้ด CSS จะแสดงผลแยกเป็น column-gap และ row-gap แต่หากคุณตั้งค่าทั้งสองให้มีขนาดเท่ากัน โค้ดจะถูกยุบรวมเป็น gap เพียงบรรทัดเดียวโดยอัตโนมัติ