CSS Grid Generator - เครื่องมือสร้าง CSS Grid แบบลากและวาง

 (cssgridgenerator.io)
18 คะแนน โดย GN⁺ 2024-07-14 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เครื่องมือที่ช่วยให้สร้างเลย์เอาต์ CSS Grid แบบกำหนดเองได้ง่ายขึ้น
    • สามารถกำหนดจำนวนคอลัมน์ แถว และขนาดช่องว่างได้สะดวกด้วยการใช้เมาส์
  • วิธีใช้งาน
    • กำหนดคอลัมน์ แถว และช่องว่างให้ตรงตามความต้องการ
    • คลิกสี่เหลี่ยมที่มีเครื่องหมาย + เพื่อเพิ่มองค์ประกอบใหม่ลงในกริด
    • ใช้แฮนเดิลที่มุมขวาล่างเพื่อปรับขนาด DIV
    • ลากและวางเพื่อจัดวาง DIV ใหม่ไปยังตำแหน่งที่ต้องการ
    • สุดท้ายคัดลอกโค้ด HTML และ CSS ที่สร้างขึ้นแล้วนำไปวางในโปรเจกต์
  • ก่อนหน้านี้ได้สร้าง Tailwind Grid Generator และได้รับฟีดแบ็กเชิงบวก จึงต่อยอดพัฒนาเครื่องมือสำหรับ plain CSS

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-07-14
ความคิดเห็นจาก Hacker News
  • หลังจากเพิ่มกล่องหลายอันแล้วลากให้ซ้อนทับกัน จะเกิดปัญหาที่องค์ประกอบหลุดออกนอกขอบเขตของกริด
  • เคยสร้าง Tailwind Grid Generator และได้รับฟีดแบ็กเชิงบวก จึงพัฒนาต่อเป็นเครื่องมือสำหรับ plain CSS
  • ปัญหาที่ยากกว่าการตั้งค่ากริดคือการจัดเรียงใหม่แบบไดนามิก
    • อ้างอิง MDN เพื่อหาวิธีให้กริดลดหรือเพิ่มจำนวนคอลัมน์
    • ยูทิลิตีเล็ก ๆ แบบนี้มีประโยชน์ในการทำงานซ้ำ ๆ ให้ง่ายขึ้น
    • น่าจะมีประโยชน์ถ้าสามารถเก็บสถานะการตั้งค่ากริดไว้ใน URL ได้
  • ตัวสร้างนี้มีประโยชน์ในฐานะเครื่องมือเรียนรู้ และเมื่อเข้าใจไวยากรณ์กับความสามารถต่าง ๆ แล้วก็จะใช้งานได้ยืดหยุ่นขึ้น
    • Chrome Dev Tools ก็มีประโยชน์ในการแก้ไขกริดและดูการเปลี่ยนแปลงได้ทันที
    • ได้เขียนโพสต์เกี่ยวกับกริดไว้ด้วย
  • ในฐานะโปรแกรมเมอร์รุ่นเก่า คุ้นเคยกับการทำกริดด้วยตาราง แต่ CSS layout นั้นยาก
    • เครื่องมือแบบนี้ช่วยได้มาก
  • เมื่อหลายปีก่อนเคยเจอเครื่องมือสร้างเว็บลักษณะคล้ายกัน แต่ไม่มีฟังก์ชันลากแล้ววาง
    • ได้เรียนรู้แนวคิดพื้นฐานของ CSS Grid เช่น grid-template-columns, gap เป็นต้น
    • หวังว่าจะทำผลงานดี ๆ แบบนี้ต่อไป
  • ตอนที่กริดออกมาใหม่ ๆ เคยคิดว่ามันจะเปลี่ยนโฉมการทำเว็บเลย์เอาต์อย่างสิ้นเชิงด้วยการอิง template areas
    • สุดท้ายไม่ได้สร้างเฟรมเวิร์กภายในขึ้นมาและหันไปใช้ flex แทน
    • จากนั้น Tailwind ก็ออกมาและตอบโจทย์ทุกอย่างที่ต้องใช้ในการเขียนฟรอนต์เอนด์แบบ responsive ได้อย่างรวดเร็ว
    • สงสัยว่ามีใครรู้จักเฟรมเวิร์กหรือตัวอย่างดี ๆ ที่ใช้ template areas บ้างไหม
    • ครั้งหน้าถ้าต้องทำงานกับกริด จะใช้เครื่องมือนี้
  • พบข้อบกพร่องสองอย่าง
    • เมื่อปรับขนาดหน้าต่างเบราว์เซอร์ ความกว้างไม่ตอบสนองตาม
    • กล่องสั้นกว่าคอนเทนเนอร์ ทำให้แถวใหม่ไปอยู่สูงขึ้นในกริด
  • ไม่ใช่นักพัฒนาเว็บ แต่คิดว่าน่าจะมีกรณีที่ต้องใช้มากกว่า 12 คอลัมน์
    • ถ้าใส่ตัวเลขที่มากกว่านี้ การพาร์สจำนวนคอลัมน์จะดูผิดปกติ
  • UX ดีมาก
    • ไม่ได้ทำหน้าเลย์เอาต์บ่อยพอที่จะเรียนรู้ไวยากรณ์ของกริดอย่างลึกซึ้ง แต่จะบุ๊กมาร์กเครื่องมือนี้ไว้แน่นอน