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

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

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1606
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์โดย Parichat » 09/01/2018 1:25 pm

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


แบบของ Grid(กริด) มี 4 แบบ ดังนี้
1.Grid Columns
fyh.JPG
fyh.JPG (22.55 KiB) เปิดดู 176 ครั้ง

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

2.Grid Rows(กริดโล) เส้นแนวนอนของรายการตารางเรียกว่า Rows
fuyo.JPG
fuyo.JPG (21.12 KiB) เปิดดู 176 ครั้ง

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

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

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

4.Grid Lines เส้นแบ่งระหว่างคอลัมน์เรียกว่า column lines.(คอลัมน์ไล)
เส้นระหว่างแถวเรียกว่า row lines.(โลไล)
ergtrh.JPG
ergtrh.JPG (42.29 KiB) เปิดดู 176 ครั้ง

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

อ้างอิง: https://www.w3schools.com/css/css_grid.asp
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน