การใช้งานระบบ Grid Layout Module(กริด เลเอ้าโมเดล) ของ CSS(ซีเอสเอส)

[Parichat]

CSS Grid Layout Module มีระบบเลย์เอาต์แบบ grid(กริด) ซึ่งมีแถวและคอลัมน์ช่วยให้ออกแบบหน้าเว็บได้ง่ายขึ้นโดยไม่ต้องใช้ floats(ฟโลท) และ positioning(โพสซิชั่นนิ้ง)
Browser ที่สนับสนุน Grid(กริด) ก็จะเป็น browser(เบราว์เซอร์) ที่ทันสมัยทั้งหมด สามารถดูได้ดังรูป

แบบของ Grid(กริด) มี 4 แบบ ดังนี้
1.Grid Columns

fyh.JPG (22.55 KiB) เปิดดู 225 ครั้ง

เส้นแนวตั้งในตารางเรียกว่า columns(คอลัมน์)
ตัวอย่างการรันโปรแกรมของ Grid Columns(กริดคอลัมน์)และโค้ด https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-column-gap

2.Grid Rows(กริดโล) เส้นแนวนอนของรายการตารางเรียกว่า Rows

fuyo.JPG (21.12 KiB) เปิดดู 225 ครั้ง

ตัวอย่างการรันโปรแกรมของ Grid Rows(กริดโล)และโค้ด--> https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-row-gap

3.Grid Gaps(กริดแก็ป) ช่องว่างระหว่างแต่ละคอลัมน์หรือแถวเรียกว่า Gaps

esth.JPG (28.67 KiB) เปิดดู 225 ครั้ง

ตัวอย่างการรันโปรแกรมของ Grid Gaps(กริดแก็ป)และโค้ด--> https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-gap2

4.Grid Lines เส้นแบ่งระหว่างคอลัมน์เรียกว่า column lines.(คอลัมน์ไล)
เส้นระหว่างแถวเรียกว่า row lines.(โลไล)

ergtrh.JPG (42.29 KiB) เปิดดู 225 ครั้ง

ตัวอย่างการรันโปรแกรมของ Grid Lines(กริดไล) และโค้ด--> https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_lines

อ้างอิง: https://www.w3schools.com/css/css_grid.asp