- 1.grid-column คุณสมบัติ grid-column สามารถกำหนดได้ว่าจะให้คอลัมน์ไหนกว้างเท่าไหร่และเรายังสามารถกำหนดตำแหน่งเริ่มต้นและตำแหน่งที่จะสิ้นสุดลงได้
ตัวอย่างผลลัพธ์โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto; grid-gap: 10px; background-color: #ccff33; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-column: 1 / 6; } </style> </head> <body> <h1>ทดสอบการใช้งาน grid-column</h1> <p>ตัวอย่างการกำหนดให้ grid-column เริ่มต้นจาก item1 และไปสิ้นสุดที่ item6</p> <p>ผลลัพธ์ของตารางก็จะได้ดังตารางข้างล่าง</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> <div class="item10">10</div> <div class="item11">11</div> <div class="item12">12</div> <div class="item13">13</div> <div class="item14">14</div> <div class="item15">15</div> </div> </body> </html>
- 2.grid-row คุณสมบัติ grid-row สามารถกำหนดได้ว่าจะให้แถวไหนกว้างเท่าไหร่และเรายังสามารถกำหนดตำแหน่งเริ่มต้นและตำแหน่งที่จะสิ้นสุดลงได้
ตัวอย่างผลลัพธ์โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto; grid-gap: 10px; background-color: #ff66ff; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-row: 1 / 6; } </style> </head> <body> <h1>ทดสอบการใช้งาน grid-row</h1> <p>ตัวอย่างการกำหนดให้ grid-column เริ่มต้นจาก item1 และไปสิ้นสุดที่ item6</p> <p>ผลลัพธ์ของตารางก็จะได้ดังตารางข้างล่าง</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> <div class="item10">10</div> <div class="item11">11</div> <div class="item12">12</div> <div class="item13">13</div> <div class="item14">14</div> <div class="item15">15</div> <div class="item16">16</div> </div> </body> </html>
- 3.grid-area สามารถกำหนดคุณสมบัติของการเริ่มต้นความกว้างของแถว ความกว้างของคอลัมน์และการสิ้นสุดของความกว้างของแถวและความกว้างของคอลัมน์
ตัวอย่างผลลัพธ์โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto; grid-gap: 10px; background-color: #ff3399; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } .item10 { grid-area: 1 / 2 / 4 / 6 ; } </style> </head> <body> <h1>ทดสอบการใช้งาน grid-area</h1> <p>ผลลัพธ์ของตารางก็จะได้ดังตารางข้างล่าง grid-area</p> <p>ตัวอย่างการกำหนดให้ grid-area เริ่มต้นจาก item1,item2 และไปสิ้นสุดที่ item6,item8</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> <div class="item10">10</div> <div class="item11">11</div> <div class="item12">12</div> <div class="item13">13</div> <div class="item14">14</div> <div class="item15">15</div> </div> </body> </html>
- 4.grid-template-areas สามารถอ้างถึงได้โดยพื้นที่ตารางแม่แบบของ grid container.
ตัวอย่างผลลัพธ์โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> .itemD { grid-area: myArea; } .grid-container { display: grid; grid-template-areas: 'myArea myArea myArea myArea myArea'; grid-gap: 10px; background-color: #ff3399; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h1>ทดสอบการใช้งาน grid-template-areas</h1> <p>ผลลัพธ์ของตารางจะได้ดังตารางข้างล่าง grid-template-areas</p> <p>ตัวอย่างการกำหนดให้ itemD เป็น grid-template-areas ที่มีชื่อว่า myArea</p> <div class="grid-container"> <div class="itemA">A</div> <div class="itemB">B</div> <div class="itemC">C</div> <div class="itemD">D</div> <div class="itemE">E</div> <div class="itemF">F</div> </div> </body> </html>
- 5.Order of the Items เป็นการเรียงลำดับรายการ
ตัวอย่างผลลัพธ์โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #ff3399; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-area: 1 / 3 / 2 / 4; } .item2 { grid-area: 2 / 3 / 3 / 4; } .item3 { grid-area: 1 / 1 / 2 / 2; } .item4 { grid-area: 1 / 2 / 2 / 3; } .item5 { grid-area: 2 / 1 / 3 / 2; } .item6 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h1>ทดสอบการเรียงลำดับรายการ</h1> <p>ตัวอย่างการเรียงลำดับตารางจะปรากฎตามตารางด้านล่าง</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> </div> </body> </html>