เรียนรู้วิธีการทำงานของคุณสมบัติ CSS Grid กับ Griddy.io

หากคุณติดตามเทคโนโลยีการออกแบบเว็บคุณควรรู้เกี่ยวกับ CSS กริด คุณสมบัติเหล่านี้คือ เพิ่มใหม่ในรูปแบบ CSS3 และพวกเขากลายเป็นเพื่อนที่ดีที่สุดของนักพัฒนาอย่างรวดเร็ว.

เมื่อเร็ว ๆ นี้เราได้กล่าวถึงเกมสนุก ๆ เพื่อช่วยให้คุณเรียนรู้คุณสมบัติของกริด CSS แต่เกมไม่ได้สอนแนวความคิดในทางปฏิบัติเสมอไป นั่นคือสิ่งที่ Griddy อาจมีประโยชน์มากกว่า.

เว็บแอปฟรีนี้ให้คุณ กำหนดกริดในเวลาจริงและอัปเดตตัวอย่างสด บนหน้า คุณสามารถยุ่งกับกริดที่กำหนดเองของคุณเองโดยการกำหนดคอลัมน์รางและระยะขอบและปรับโครงสร้างหน้าใหม่เพื่อเรียนรู้วิธีการทำงานของคุณสมบัติกริด.

Griddy เป็นจริง เครื่องมือการเรียนรู้ฟรีที่สร้างขึ้นสำหรับนักพัฒนาส่วนหน้า ผู้ที่ต้องการทำความเข้าใจเพิ่มเติมเกี่ยวกับกริด CSS.

ด้วยเว็บแอพนี้คุณสามารถเพิ่มไอเท็มใหม่ ๆ ลงในกริดลบไอเทมอื่น ๆ และปรับขนาดให้พอดีกับเลย์เอาต์ที่คุณต้องการ.

webapp มีส่วนต่าง ๆ ที่มีฟิลด์อินพุตต่างกันสำหรับการแก้ไขคุณสมบัติกริด สิ่งเหล่านี้ช่วยให้คุณจัดรูปแบบแถว / คอลัมน์ตารางและพวกเขาสอนคุณ สิ่งที่คุณกำลังทำ ระหว่างทาง.

คุณสามารถกำหนดช่องว่างของคอลัมน์จัดแนวรายการในตารางและเล่นด้วยการตั้งค่าการจัดชิดขอบ - ทั้งหมดผ่านช่องแบบฟอร์มเหล่านี้ เมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลงมันจะอัปเดตตัวอย่างโดยอัตโนมัติและข้อมูลโค้ดขนาดเล็กที่อยู่ด้านล่าง.

วิธีนี้คุณสามารถคัดลอกและวาง CSS ลงในสไตล์ชีทของคุณเองถ้าคุณต้องการที่จะยุ่งกับมันต่อไป สวยเท่ห์!

Griddy อาจไม่สนุกเท่า Grid Garden แต่ Griddy เป็นวิธีการเรียนรู้และปฏิบัติ มองเห็นเข้าใจ คุณสมบัติของกริด CSS มีผลกับองค์ประกอบของหน้าอย่างไร.

หากต้องการเล่นกับมันเพียงไปที่หน้าแรกของ Griddy นอกจากนี้คุณยังสามารถแบ่งปันความคิดหรือคำถามของคุณกับผู้สร้างบน Twitter @drewisthe.