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