คุณสร้างเลย์เอาต์ด้วย CSS Grid อย่างไร?

Question

Accepted Answer

**CSS Grid** เป็นระบบเลย์เอาต์แบบสองมิติ ซึ่งควบคุม **แถวและคอลัมน์พร้อมกัน** ต่างจาก Flexbox ที่จัดการเส้นเดียว คุณกำหนด grid บน container แล้ววางไอเท็มลงไป

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## หน่วย fr และ repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraction") กระจายพื้นที่ที่มีอยู่ เช่น `1fr 2fr` แบ่งพื้นที่ในอัตราส่วน 1:2 ส่วน `repeat(3, 1fr)` เป็นรูปย่อของ track ที่เท่ากันสามอัน

## Grid แบบ responsive ที่ไม่ต้องใช้ media query เลย

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

บรรทัดเดียวนี้สร้าง grid ของการ์ดที่ responsive อย่างสมบูรณ์ แต่ละคอลัมน์มีความกว้างอย่างน้อย `250px` เบราว์เซอร์จะจัดวาง **ให้ได้มากที่สุดเท่าที่จะทำได้** ต่อแถวและขึ้นบรรทัดใหม่ส่วนที่เหลือ โดยปรับจาก 4 คอลัมน์บนเดสก์ท็อปไปเป็น 1 คอลัมน์บนมือถือโดยอัตโนมัติ `auto-fit` ร่วมกับ `minmax` เป็นหนึ่งในรูปแบบที่ได้รับความนิยมมากที่สุดของ Grid

## การวางไอเท็มข้ามหลายเซลล์

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

ไอเท็มสามารถขยายข้ามหลายแถว/คอลัมน์ได้ ทำให้สร้างเลย์เอาต์แบบนิตยสารที่ทำได้ยากด้วย Flexbox

## Grid กับ Flexbox

- **Grid** — เลย์เอาต์แบบ 2 มิติ (ทั้งแถว *และ* คอลัมน์): เลย์เอาต์ของหน้า, grid ของการ์ด, แดชบอร์ด
- **Flexbox** — เลย์เอาต์แบบ 1 มิติ (แถวหรือคอลัมน์เดียว): navbar, กลุ่มปุ่ม, การจัดให้อยู่กึ่งกลาง

ทั้งสองทำงานร่วมกันได้ดี เซลล์ของ grid เองก็สามารถเป็น flex container ได้

## ทำไมจึงสำคัญ

Grid เป็นเครื่องมือจัดเลย์เอาต์ของ CSS ที่ทรงพลังที่สุด มันจัดการเลย์เอาต์เต็มหน้าและ grid ของการ์ดแบบ responsive ได้อย่างสะอาดตา มักจะมาแทนที่การใช้ลูกเล่น div ซ้อนกัน

เพียงแค่รูปแบบ responsive ด้วย `auto-fit`/`minmax` ก็ขจัดความจำเป็นในการใช้ media query หลาย ๆ อันออกไปได้แล้ว