Tools ดีๆช่วยสร้าง Layout กับ CSS Grid Generator

Tools ดีๆ ช่วยในเรื่องของการพัฒนาเว็บไซต์ โดยเฉพาะเรื่องของ CSS นั้นมีเยอะแยะมากมายเต็มไปหมด วันนี้ผมหยิบยกมาหนึ่งเรื่องครับ เกี่ยวกับเรื่องของ Grid ที่เป็นเรื่องสำคัญมากๆ ในการจัดวาง Layout ของหน้าเว็บเรา

Tools Grid css generator

Tools ดีๆ ช่วยในเรื่องของการพัฒนาเว็บไซต์ โดยเฉพาะเรื่องของ CSS นั้นมีเยอะแยะมากมายเต็มไปหมด วันนี้ผมหยิบยกมาหนึ่งเรื่องครับ เกี่ยวกับเรื่องของ Grid ที่เป็นเรื่องสำคัญมากๆ ในการจัดวาง Layout ของหน้าเว็บเรา

Generate basic CSS Grid code to make dynamic layouts! 

CSS Grid เป็นเรื่องสนุก การจัดวาง Layout ต่างๆของหน้าเว็บไซต์ ในยุคนี้ เป็นการสร้างสรรค์ที่ง่ายขึ้น แต่แม้จะง่ายปานใด

ผู้คนก็ยังคงถวิลหาเครื่องมือดีๆ ที่ช่วยให้มัน ทำงานง่ายขึ้นเข้าไปอีก อย่างเครื่องมือชุดนี้ คือ CSS Grid Generator ที่จะช่วยให้เราทำงานง่ายขึ้น

เริ่มกันตั้งแต่ ระบุค่าลงไปก่อน ว่าเราต้องการ กี่ Column และกี่ Row จากนั้นกำหนดลงไปว่าในแต่ละ Column ต้องการให้มีพื้นที่ช่องว่างระหว่างกัน หรือที่เรียกว่า Column Gap อีกเท่าไหร่ และปิดด้วย Row Gap อีกเท่าไหร

จากนั้น ก็เอาเมาส์ไปคลิกตรง div ต่างๆที่เราต้องการเอามาทำงานจริง ทีนี้เราก็จะได้ css ที่ประกอบไปด้วย .parent และ .div1, .div2 ไปตามลำดับที่เราเลือกมา

จะเห็นว่า แค่เราคลิก ไม่กี่ครั้ง ก็จะได้ Layout สวยๆตามใจของเรามาใช้งานกันแล้ว แถมเจ้าเครื่องมือตัวนี้ ยังเป็น Open source ด้วย พัฒนาบนความสามารถของ Vue.js และวางไว้บน netlify

ใครสนใจอยากเล่นกับ Grid แต่ไม่รู้จะเริ่มยังไง ลองเอาตัวนี้ไปเล่นก่อนครับ

Link: https://cssgrid-generator.netlify.com/

คุณอาจสนใจเรื่องของ
Link: Content ยุคใหม่สร้างด้วย Editor JS เครื่องมือแนว Block

Leave a Reply

Your email address will not be published. Required fields are marked *