CSS Grid Layout Module มีระบบเลย์เอาต์แบบ grid(กริด) ซึ่งมีแถวและคอลัมน์ช่วยให้ออกแบบหน้าเว็บได้ง่ายขึ้นโดยไม่ต้องใช้ floats(ฟโลท) และ positioning(โพสซิชั่นนิ้ง)
Browser ที่สนับสนุน Grid(กริด) ก็จะเป็น browser(เบราว์เซอร์) ที่ทันสมัยทั้งหมด สามารถดูได้ดังรูป
แบบของ Grid(กริด) มี 4 แบบ ดังนี้
1.Grid Columns
เส้นแนวตั้งในตารางเรียกว่า columns(คอลัมน์)
ตัวอย่างการรันโปรแกรมของ Grid Columns(กริดคอลัมน์)และโค้ด https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-column-gap
2.Grid Rows(กริดโล) เส้นแนวนอนของรายการตารางเรียกว่า Rows
ตัวอย่างการรันโปรแกรมของ Grid Rows(กริดโล)และโค้ด--> https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-row-gap
3.Grid Gaps(กริดแก็ป) ช่องว่างระหว่างแต่ละคอลัมน์หรือแถวเรียกว่า Gaps
ตัวอย่างการรันโปรแกรมของ Grid Gaps(กริดแก็ป)และโค้ด--> https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-gap2
4.Grid Lines เส้นแบ่งระหว่างคอลัมน์เรียกว่า column lines.(คอลัมน์ไล)
เส้นระหว่างแถวเรียกว่า row lines.(โลไล)
ตัวอย่างการรันโปรแกรมของ Grid Lines(กริดไล) และโค้ด--> https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_lines
อ้างอิง: https://www.w3schools.com/css/css_grid.asp
การใช้งานระบบ Grid Layout Module(กริด เลเอ้าโมเดล) ของ CSS(ซีเอสเอส)
Moderator: mindphp, ผู้ดูแลกระดาน
- Parichat
- PHP VIP Members
- โพสต์: 3340
- ลงทะเบียนเมื่อ: 08/01/2018 10:03 am
การใช้งานระบบ Grid Layout Module(กริด เลเอ้าโมเดล) ของ CSS(ซีเอสเอส)
Live Simply, Laugh Often, Love Deeply.....
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
การใช้งาน Python GUI (Tkinter) : Grid (กำหนดตำแหน่ง grid)
โดย Jom07 » 01/03/2018 2:15 pm » ใน Python Knowledge - 0
- 396
-
โดย Jom07
ดูข้อความล่าสุด
01/03/2018 2:15 pm
-
-
-
การใช้งาน Grid ในการจัดรูปภาพให้เรียงเป็นคอลัมเดียวกัน ไฟล์แนบ
โดย Parichat » 27/06/2018 12:12 pm » ใน Booststap Knowledge - 0
- 595
-
โดย Parichat
ดูข้อความล่าสุด
27/06/2018 12:12 pm
-
-
-
Tip CSS : Navigation Tabs in Grid (เนวิเกชั่น แท็บส์ ในกริด) อย่างง่าย ไฟล์แนบ
โดย pprn » 10/07/2018 3:18 pm » ใน CSS Knowledge - 0
- 442
-
โดย pprn
ดูข้อความล่าสุด
10/07/2018 3:18 pm
-
-
-
การทำ ViewStub ใน Android Studio เพื่อใช้ซ่อนหน้า Layout
โดย rangsan » 02/05/2018 4:10 pm » ใน Mobile Application Developing- Android, iOS - 0
- 989
-
โดย rangsan
ดูข้อความล่าสุด
02/05/2018 4:10 pm
-
ผู้ใช้งานขณะนี้
กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน