การใช้งาน Grid Item ใน CSS

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1714
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้งาน Grid Item ใน CSS

โพสต์โดย 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>

    ผลลัพธ์
    sfg.JPG
    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>

    ผลลัพธ์
    dfgt.JPG

    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>

    ผลลัพธ์
    jmkl.JPG

    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>

    ผลลัพธ์
    fdgh.JPG
    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>

    ผลลัพธ์
    fgytu.JPG

อ้างอิง: https://www.w3schools.com/css/css_grid_item.asp
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 9 และ บุคคลทั่วไป 0 ท่าน