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 ... column-gap
2.Grid Rows(กริดโล) เส้นแนวนอนของรายการตารางเรียกว่า Rows
ตัวอย่างการรันโปรแกรมของ Grid Rows(กริดโล)และโค้ด--> https://www.w3schools.com/css/tryit.asp ... id-row-gap
3.Grid Gaps(กริดแก็ป) ช่องว่างระหว่างแต่ละคอลัมน์หรือแถวเรียกว่า Gaps
ตัวอย่างการรันโปรแกรมของ Grid Gaps(กริดแก็ป)และโค้ด--> https://www.w3schools.com/css/tryit.asp ... _grid-gap2
4.Grid Lines เส้นแบ่งระหว่างคอลัมน์เรียกว่า column lines.(คอลัมน์ไล)
เส้นระหว่างแถวเรียกว่า row lines.(โลไล)
ตัวอย่างการรันโปรแกรมของ Grid Lines(กริดไล) และโค้ด--> https://www.w3schools.com/css/tryit.asp ... grid_lines
อ้างอิง: https://www.w3schools.com/css/css_grid.asp
การใช้งานระบบ Grid Layout Module(กริด เลเอ้าโมเดล) ของ CSS(ซีเอสเอส)
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP VIP Members
- โพสต์: 4859
- ลงทะเบียนเมื่อ: 08/01/2018 10:03 am
การใช้งานระบบ Grid Layout Module(กริด เลเอ้าโมเดล) ของ CSS(ซีเอสเอส)
Live Simply, Laugh Often, Love Deeply.....
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน
โดย Panchalee » 01/11/2017 11:20 am » ใน Booststap Knowledge - 0 ตอบกลับ
- 2652 แสดง
-
โพสต์ล่าสุด โดย Panchalee
01/11/2017 11:20 am
-
-
-
โพสต์ใหม่ การใช้ bootstrap Grid บูทแตร๊ป กริต เบื้องต้น - ทำ Respovsive
โดย sonram » 12/07/2016 5:20 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 1744 แสดง
-
โพสต์ล่าสุด โดย sonram
12/07/2016 5:20 pm
-
-
-
โพสต์ใหม่ Q - เรามีวิธีการ กำหนดตัว Module ลงใน Grid อย่างไรครับ
โดย Patipat » 24/07/2019 11:03 am » ใน Joomla Development - 2 ตอบกลับ
- 459 แสดง
-
โพสต์ล่าสุด โดย Patipat
24/07/2019 11:30 am
-
-
-
โพสต์ใหม่ การใช้งาน Python GUI (Tkinter) : Grid (กำหนดตำแหน่ง grid)
โดย Jom07 » 01/03/2018 2:15 pm » ใน Python Knowledge - 0 ตอบกลับ
- 2348 แสดง
-
โพสต์ล่าสุด โดย Jom07
01/03/2018 2:15 pm
-
-
-
โพสต์ใหม่ ปรับเปลี่ยน Layout ด้วยฟังก์ชั่น Auto Layout ใน Figma
โดย pataponnew » 27/05/2021 11:12 am » ใน Graphic design - 0 ตอบกลับ
- 2406 แสดง
-
โพสต์ล่าสุด โดย pataponnew
27/05/2021 11:12 am
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 58