เมื่อสร้างเว็บแอปพลิเคชัน สิ่งแรกที่ต้องมีคือวิธีจัดวางเนื้อหาของแอป
นักออกแบบจํานวนมากใช้ตารางกริดสมมติเพื่อวางเลย์เอาต์เนื้อหา ไม่ว่าจะเป็นเว็บไซต์หรือแอป กลุ่ม CSS ทํางานอย่างหนักเพื่อให้เลย์เอาต์ง่ายขึ้น และหนึ่งในนั้นก็คือการสร้าง CSS Grid Layout Module ซึ่งตอนนี้เริ่มปรากฏในเบราว์เซอร์แล้ว
ฟีเจอร์นี้พร้อมให้ทดลองใช้แล้วใน Chrome โดยใช้ Flag ทดลอง นอกจากนี้ ยังใช้งานใน IE ตั้งแต่เวอร์ชัน 10 และคาดว่าจะมีให้บริการในเบราว์เซอร์ส่วนใหญ่ในเร็วๆ นี้
ข้อมูลสรุป
- เลย์เอาต์ตารางกริด CSS ช่วยให้คุณกําหนดแถวและคอลัมน์สําหรับเลย์เอาต์ได้
- ตารางกริดสามารถปรับให้ใช้พื้นที่ที่มีอยู่ได้
- ลําดับเนื้อหาอาจไม่เกี่ยวข้องกับลําดับการแสดงคอนเทนเนอร์ตารางกริด
- เลย์เอาต์สามารถเปลี่ยนแปลงตามการค้นหาสื่อได้ ซึ่งทำให้การออกแบบที่ตอบสนองตามอุปกรณ์ง่ายขึ้น
- เนื้อหาสามารถซ้อนทับกันได้ (เปิดใช้เลย์เอาต์ที่ทําไม่ได้ด้วยวิธีอื่นๆ)
- เลย์เอาต์ตารางกริดทำงานได้อย่างรวดเร็ว
ต่อไปนี้เป็นวิดีโอภาพรวมที่อธิบายวิธีการทำงานของเลย์เอาต์ตาราง CSS (ดูสไลด์ได้ที่นี่
ลองเลย
ตอนนี้การใช้เลย์เอาต์ตาราง CSS ใน Chrome ทำได้ง่าย สิ่งแรกที่ต้องทำคือเปิด Flag เวอร์ชันทดลองเพื่อเปิดใช้ฟีเจอร์
ก่อนอื่น ให้โหลด URL chrome://flags แล้วเลื่อนลงไปที่ตัวเลือกเพื่อเปิดใช้ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองดังที่แสดงด้านล่าง
เพียงคลิกเปิดใช้เพื่อเปิด Flag แล้วคุณควรเห็นข้อความแจ้งให้รีสตาร์ทเบราว์เซอร์ดังรูปภาพต่อไปนี้
จากนั้นคลิกปุ่มเปิดใหม่เลยเพื่อรีสตาร์ทเบราว์เซอร์ แล้วคุณก็พร้อมที่จะลองใช้เลย์เอาต์ตารางกริด CSS
บอกให้เรารู้ว่าคุณคิดอย่างไร
เลย์เอาต์ตาราง CSS เป็นองค์ประกอบพื้นฐานใหม่ที่ยอดเยี่ยมสำหรับเนื้อหาเว็บ แต่ตามปกติแล้ว เราทุกคนก็อยากทราบความคิดเห็นของนักพัฒนาซอฟต์แวร์เกี่ยวกับเรื่องนี้ คุณสามารถแสดงความคิดเห็นได้ที่นี่ ส่งอีเมลไปยังรายชื่อกลุ่มทํางาน CSS ของ W3C พร้อมใส่ "[css-grid]" ในบรรทัดเรื่อง บันทึกข้อบกพร่อง หรือเขียนบล็อกและทวีตความคิดเห็นของคุณ เราหวังว่าจะได้ดูเลย์เอาต์ที่ยอดเยี่ยมที่คุณสร้างด้วยฟีเจอร์ใหม่ที่มีประโยชน์มากนี้