CSS Grid Layout

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;

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

CSS Grid Layout

Spelling error report

The following text will be sent to our editors:

Your comment (optional):