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