เครื่องมือสร้าง CSS Grid
กำหนดคอลัมน์และแถว ลากเมาส์ผ่านช่องตารางเพื่อวางไอเทม และคัดลอก CSS ของกริดพร้อม HTML ที่ตรงกันได้ในคลิกเดียว
กริดของคุณจะถูกสร้างขึ้นในเบราว์เซอร์โดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo
คำถามที่พบบ่อย
จะวางไอเทมลงบนกริดได้อย่างไร?
กดและลากเมาส์ผ่านช่องตารางเพื่อกำหนดพื้นที่สี่เหลี่ยม เมื่อปล่อยเมาส์ พื้นที่นั้นจะกลายเป็นไอเทมลูกที่วางอยู่บนคอลัมน์และแถวเหล่านั้น ไอเทมแต่ละชิ้นที่คุณวาดจะได้รับกฎ grid-column และ grid-row ของตัวเองใน CSS และมีแท็ก div ที่ตรงกันใน HTML ไอเทมสามารถซ้อนทับกันได้ โดยชิ้นที่วาดทีหลังจะอยู่ด้านบน และคุณสามารถคลิกเครื่องหมาย × บนไอเทมเพื่อลบออกได้
คอลัมน์และแถวสามารถมีขนาดแตกต่างกันได้หรือไม่?
ได้แน่นอน แต่ละแทร็กจะมีช่องกำหนดขนาดของตัวเอง ซึ่งคุณสามารถกรอกค่ากริดใดก็ได้ เช่น 1fr, 200px, auto, min-content หรือ minmax(120px, 1fr) แทร็กที่มีขนาดเท่ากันจะถูกยุบรวมเป็นฟังก์ชัน repeat() เพื่อให้โค้ดสั้นลง ส่วนระยะห่างคอลัมน์และแถวจะถูกตั้งค่าแยกกัน และจะยุบรวมเป็น gap ตัวเดียวเมื่อมีค่าเท่ากัน
ต้องทำอย่างไรกับโค้ดที่สร้างขึ้น?
คัดลอกทั้งโค้ด CSS และ HTML ไปใช้งานร่วมกัน โดย HTML จะให้โครงสร้างคอนเทนเนอร์ที่มี div หนึ่งตัวต่อหนึ่งไอเทม และ CSS จะทำหน้าที่กำหนดรูปแบบกริดและระบุตำแหน่งของแต่ละไอเทม เมื่อนำทั้งสองส่วนไปวางในโปรเจกต์ของคุณ คุณจะได้เลย์เอาต์ที่ตรงตามที่คุณวาดไว้ที่นี่ทุกประการ