ความสามารถของ CSS Grid

CSS Grid เป็นระบบจัดวางเลย์เอาต์แบบสองมิติ (2D) ที่ช่วยให้สามารถสร้างโครงสร้างเว็บที่ซับซ้อนได้อย่างง่ายดายและยืดหยุ่น โดยสามารถควบคุมทั้งแถว (rows) และคอลัมน์ (columns) ได้พร้อมกัน 

ความแตกต่าง CSS Grid และ CSS Flexbox

จากที่กล่าวไปข้างต้น CSS Grid สามารถจัดวางเลย์เอาต์แบบสองมิติ (2D) แต่ CSS Flexbox ทำงานกับแกนใดแกนหนึ่งเท่านั้น โดยค่าเริ่มต้นเป็นแนวนอน (rows) แต่ก็สามารถกำหนดทิศทาง Direction ให้เป็นแนวตั้ง (column) ได้

ฟีเจอร์หลักของ CSS Grid มีดังนี้

กำหนดจำนวนและขนาดของแถวและคอลัมน์ ด้วย grid-template-columns และ grid-template-rows สามารถใช้หน่วยต่างๆ เช่น px, %, fr (fractional unit)

กำหนดช่องว่าง (gaps) ระหว่างแถวและคอลัมน์ด้วย gap, row-gap, column-gap

กำหนดตำแหน่งของไอเท็ม ด้วย grid-column, grid-row, หรือใช้การตั้งชื่อพื้นที่ด้วย grid-template-areas

สร้างเลย์เอาต์ที่ตอบสนองต่ออุปกรณ์ (responsive) ด้วย minmax(), auto-fit, auto-fill และ media queries

ควบคุมการจัดวางอัตโนมัติ ด้วย grid-auto-flow เพื่อกำหนดทิศทางการวางไอเท็มอัตโนมัติ

ซ้อน Grid (Nested Grids) สามารถสร้าง Grid ซ้อนกันเพื่อโครงสร้างที่ซับซ้อน

ตัวอย่างการใช้งานแต่ละฟังก์ชันของ CSS Grid

กำหนดใน <div> class "container" ให้เป็นพื้นที่ Grid โดยแต่ละแถว (rows) แบ่งเป็น 4 คอลัมน์

grid-template-columns: auto auto auto auto;

.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 20px;
}

<div class="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>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

แก้ไข เขียนคำสั่งให้สั้นลง ด้วย repeat จำนวนคอลัมน์ที่ต้องการ และกำหนดขนาดให้เท่ากันทุกช่องด้วยหน่วย fr (fractional unit)

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

กำหนดให้ <div> ที่กำหนด ย้ายไปยังตำแหน่งที่ต้องการ เช่น ต้องการให้ ช่องหมายเลข 1 ไปอยู่แถวที่ 2 คอลัมน์ที่ 3

ใช้คำสั่ง grid-row: 2 / 3; และ grid-column: 3 / 4;

อธิบาย ตัวเลขใน grid-row คือ ตำแหน่งขอบด้านบน ของแถวที่ 2 และ / ตำแหน่งขอบด้านบน ของแถวที่ 3

ตัวเลขใน grid-column คือ ตำแหน่งขอบด้านซ้าย ของคอลัมน์ที่ 3 และ / ตำแหน่งขอบด้านซ้าย ของคอลัมน์ที่ 4

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.item-1 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

<div class="container">
  <div class="item-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

กำหนดให้ <div> ที่กำหนด ไปยังตำแหน่งที่ต้องการ และขยายความกว้างของช่อง

ใช้คำสั่ง grid-row: 2 / 4; และ grid-column: 2 / 5;

.item-1 {
  grid-row: 2 / 4;
  grid-column: 2 / 5;
}

การใช้ grid-template-areas เพื่อกำหนดโครงสร้างพื้นที่ตามที่ต้องการ

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    'header header header header header'
    'left main main main right'
    'left main main main right'
    'footer footer footer footer footer';
  gap:20px;
}

.item1 { grid-area: header; }
.item2 { grid-area: left; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

<div class="container">
  <div class="item1">Header</div>
  <div class="item2">Left</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>