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

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

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

Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

CSS Grid Layout Module มีระบบเลย์เอาต์แบบ grid(กริด) ซึ่งมีแถวและคอลัมน์ช่วยให้ออกแบบหน้าเว็บได้ง่ายขึ้นโดยไม่ต้องใช้ floats(ฟโลท) และ positioning(โพสซิชั่นนิ้ง)
Browser ที่สนับสนุน Grid(กริด) ก็จะเป็น browser(เบราว์เซอร์) ที่ทันสมัยทั้งหมด สามารถดูได้ดังรูป
fgg.JPG
แบบของ Grid(กริด) มี 4 แบบ ดังนี้
1.Grid Columns
fyh.JPG
fyh.JPG (22.55 KiB) Viewed 2152 times
เส้นแนวตั้งในตารางเรียกว่า columns(คอลัมน์)
ตัวอย่างการรันโปรแกรมของ Grid Columns(กริดคอลัมน์)และโค้ด https://www.w3schools.com/css/tryit.asp ... column-gap

2.Grid Rows(กริดโล) เส้นแนวนอนของรายการตารางเรียกว่า Rows
fuyo.JPG
fuyo.JPG (21.12 KiB) Viewed 2152 times
ตัวอย่างการรันโปรแกรมของ Grid Rows(กริดโล)และโค้ด--> https://www.w3schools.com/css/tryit.asp ... id-row-gap

3.Grid Gaps(กริดแก็ป) ช่องว่างระหว่างแต่ละคอลัมน์หรือแถวเรียกว่า Gaps
esth.JPG
esth.JPG (28.67 KiB) Viewed 2152 times
ตัวอย่างการรันโปรแกรมของ Grid Gaps(กริดแก็ป)และโค้ด--> https://www.w3schools.com/css/tryit.asp ... _grid-gap2

4.Grid Lines เส้นแบ่งระหว่างคอลัมน์เรียกว่า column lines.(คอลัมน์ไล)
เส้นระหว่างแถวเรียกว่า row lines.(โลไล)
ergtrh.JPG
ergtrh.JPG (42.29 KiB) Viewed 2152 times
ตัวอย่างการรันโปรแกรมของ Grid Lines(กริดไล) และโค้ด--> https://www.w3schools.com/css/tryit.asp ... grid_lines

อ้างอิง: https://www.w3schools.com/css/css_grid.asp
Live Simply, Laugh Often, Love Deeply.....
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 63