Grid layout เป็นเค้าโครงเว็บไซต์ในรูปแบบของตาราง (grid) ซึ่งประกอบไปด้วยแถวและคอลัมน์เป็นหลัก ทำให้ง่ายต่อการออกแบบเค้าโครงเว็บไซต์
โดยองค์ประกอบของ Grid (Grid Element) ประกอบไปด้วย element แม่เพียงหนึ่งเดียว และ element ลูกหลายตัว ดังต่อไปนี้
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: rgb(255,120,13); padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 1); padding: 20px; margin:2px; font-size: 25px; text-align: center; } </style> </head> <body> <h1>องค์ประกอบของ Grid</h1> <div class="grid-container"> <div class="grid-item">A</div> <div class="grid-item">B</div> <div class="grid-item">C</div> <div class="grid-item">D</div> <div class="grid-item">E</div> <div class="grid-item">F</div> </div> </body> </html>
ไฟล์ที่ 1 องค์ประกอบของ Grid layout
ภาพที่ 1 Grid System
จากภาพที่ 1 Grid System หรือระบบกริดนั้นมีคุณสมบัติ 4 อย่างหลักๆ
- Column คอลัมน์
- Row แถว
- Column Gap ระยะห่างระหว่างแถว
- Row Gap ระยะห่างระหว่างคอลัมน์
การใช้งาน Grid พื้นฐาน
ขั้นที่ 1 สร้างขอบเขตของ grid
.grid-container { display: grid; }-
ขั้นที่ 2 กำหนดรูปแบบการแสดงผลของ grid column
.grid-container { display: grid; grid-template-columns: auto auto auto auto; }
ขั้นที่ 3 กำหนดระยะห่างระหว่างแถว และระหว่างคอลัมน์
.grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-column-gap:16px; grid-row-gap:16px; }
ขั้นที่ 4 กำหนดรูปแบบของ element ที่อยู่ภายใน classes grid-container
.grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-column-gap:16px; grid-row-gap:16px; } .grid-container > div{ background-color:red; padding:50px; text-align:center; color:white; font-size:20px; border:10px dotted black; }
ขั้นที่ 5 สร้างองค์ประกอบ (element) ของ HTML เพื่อใช้กริด
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-column-gap:16px; grid-row-gap:16px; } .grid-container > div{ background-color:red; padding:50px; text-align:center; color:white; font-size:20px; border:10px dotted black; } </style> </head> <body> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> </html>
ไฟล์ที่ 2 การใช้งาน grid พื้นฐาน
ตัวอย่างการใช้งาน Grid สร้างเค้าโครงเว็บไซต์
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-gap: 10px; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); text-align: center; font-size: 30px; padding:20px; } .item1 { grid-column: 1 / span 5; grid-row: 1; padding : 50px; background-color:red; } .item2 { grid-column: 1; grid-row: 2; background-color: rgba(255,0,0,0.5); } .item3{ grid-row:2 / span 2; grid-column:2 / span 4; background-color:rgb(190,189,189); } .item4{ grid-row:4; grid-column:1 / span 5; background-color:red; } @media only screen and (max-width: 500px) { .item1{grid-row:1; grid-column:1;} .item2{grid-row:2; grid-column:1;} .item3{grid-row:3; grid-column:1;} .item4{grid-row:4; grid-column:1;} } </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="grid-container"> <div class="grid-item item1">Header</div> <div class="grid-item item2">Menu</div> <div class="grid-item item3">Content<br>.<br>.<br>.<br>.<br>.<br>.</div> <div class="grid-item item4">Footer</div> </div> </body> </html>
ไฟล์ที่ 3 ตัวอย่างการใช้ Grid system
อธิบายไฟล์ที่ 3
- grid-row ใช้ในการระบุแถวในการจัดวาง element
- grid-column ใช้ในการระบุคอลัมน์ในการจัดวาง element
- span คือ การรวมแถว/คอลัมน์ ยกตัวอย่างเช่นการรวมแถวที่ 1 ถึงแถว 3 สามารถเขียนได้ดังนี้ grid-row: 1 / span 3;