โดย Parichat » 10/01/2018 1:48 pm
ในการใช้งาน Grid Item ใน CSS มีการแบ่งย่อยๆได้ 5 แบบด้วยกัน ไปดูกันเลย
- 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>
ผลลัพธ์
อ้างอิง:
https://www.w3schools.com/css/css_grid_item.asp
[b][color=#FF0080][size=150]ในการใช้งาน Grid Item ใน [url=https://www.mindphp.com/forums/viewforum.php?f=73]CSS[/url][/size][/color][/b] มีการแบ่งย่อยๆได้ 5 แบบด้วยกัน ไปดูกันเลย
[list][b]1.grid-column[/b] คุณสมบัติ[b] grid-column[/b] สามารถกำหนดได้ว่าจะให้คอลัมน์ไหนกว้างเท่าไหร่และเรายังสามารถกำหนดตำแหน่งเริ่มต้นและตำแหน่งที่จะสิ้นสุดลงได้
[color=#FF0000][b]ตัวอย่าง[/b][/color]
[code]<!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>
[/code]
[color=#FF0000][b]ผลลัพธ์[/b][/color]
[attachment=4]sfg.JPG[/attachment][/list]
[list][b]2.grid-row[/b] คุณสมบัติ grid-row สามารถกำหนดได้ว่าจะให้แถวไหนกว้างเท่าไหร่และเรายังสามารถกำหนดตำแหน่งเริ่มต้นและตำแหน่งที่จะสิ้นสุดลงได้
[color=#FF0000][b]ตัวอย่าง[/b][/color]
[code]<!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>
[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=3]dfgt.JPG[/attachment]
[/list]
[list][b]3.grid-area[/b] สามารถกำหนดคุณสมบัติของการเริ่มต้นความกว้างของแถว ความกว้างของคอลัมน์และการสิ้นสุดของความกว้างของแถวและความกว้างของคอลัมน์
[color=#FF0000][b]ตัวอย่าง[/b][/color]
[code]<!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>
[/code]
[color=#FF0000][b]ผลลัพธ์[/b][/color]
[attachment=2]jmkl.JPG[/attachment]
[/list]
[list][b]4.grid-template-areas[/b] สามารถอ้างถึงได้โดยพื้นที่ตารางแม่แบบของ grid container.
[color=#FF0000][b]ตัวอย่าง[/b][/color]
[code]<!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>
[/code]
[color=#FF0000][b]ผลลัพธ์[/b][/color]
[attachment=1]fdgh.JPG[/attachment][/list]
[list][b]5.Order of the Items[/b] เป็นการเรียงลำดับรายการ
[color=#FF0000][b]ตัวอย่าง[/b][/color]
[code]<!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>
[/code]
[color=#FF0000][b]ผลลัพธ์[/b][/color]
[attachment=0]fgytu.JPG[/attachment][/list]
อ้างอิง: [url]https://www.w3schools.com/css/css_grid_item.asp[/url]