Grid คืออะไร?

Grid Layout เป็นระบบการจัด Layout ที่ทรงพลังใน CSS ช่วยให้คุณสามารถสร้างโครงสร้างหน้าเว็บที่ซับซ้อนได้อย่างง่ายดาย ใน Tailwind CSS คุณสามารถใช้ Utility Classes สำหรับ Grid เพื่อควบคุมจำนวนคอลัมน์, ระยะห่าง, และการจัดตำแหน่งองค์ประกอบได้ทันที โดยไม่ต้องเขียน CSS เพิ่มเติม

1. การเริ่มต้นใช้งาน Grid

การเปิดใช้งาน Grid ใน Tailwind CSS ทำได้ง่าย ๆ ด้วยคลาส grid:

ตัวอย่าง:

<div class="grid bg-gray-200 p-4 gap-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

• คลาส grid จะทำให้ Container ใช้ Grid Layout
• คลาส gap-4 จะกำหนดระยะห่างระหว่างองค์ประกอบ 1rem

2. การกำหนดจำนวนคอลัมน์

คุณสามารถกำหนดจำนวนคอลัมน์ใน Grid ได้ด้วยคลาส grid-cols-{value}:

ตัวอย่าง:

<div class="grid grid-cols-3 gap-4 bg-gray-200 p-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

ในตัวอย่างนี้:

• คลาส grid-cols-3 กำหนดให้มี 3 คอลัมน์
• คลาส gap-4 กำหนดระยะห่างระหว่างคอลัมน์และแถว

3. การกำหนดจำนวนแถว

Tailwind CSS ช่วยให้คุณกำหนดจำนวนแถวใน Grid ได้ด้วยคลาส grid-rows-{value}:

ตัวอย่าง:

<div class="grid grid-rows-2 gap-4 bg-gray-200 p-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

ในตัวอย่างนี้:

• คลาส grid-rows-2 จะสร้าง 2 แถว โดยองค์ประกอบที่เหลือจะถูกใส่ในแถวที่สอง

4. การกำหนดขนาดคอลัมน์และแถวแบบอัตโนมัติ

คุณสามารถให้ขนาดของคอลัมน์หรือแถวปรับตามเนื้อหาได้ด้วยคลาส:

• auto-cols-{value}: สำหรับคอลัมน์
• auto-rows-{value}: สำหรับแถว

ตัวอย่าง:

<div class="grid auto-rows-min gap-4 bg-gray-200 p-4">
  <div class="bg-blue-500 p-4 h-16">Box 1</div>
  <div class="bg-green-500 p-4 h-32">Box 2</div>
  <div class="bg-red-500 p-4 h-48">Box 3</div>
</div>

ในตัวอย่างนี้:

• คลาส auto-rows-min ทำให้แถวมีขนาดเท่ากับเนื้อหาที่เล็กที่สุด

5. การควบคุมการขยายและรวมคอลัมน์/แถว

Tailwind CSS มีคลาสสำหรับการควบคุมการรวมคอลัมน์ (col-span) และแถว (row-span):

ตัวอย่าง:

<div class="grid grid-cols-3 gap-4 bg-gray-200 p-4">
  <div class="col-span-2 bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="row-span-2 bg-red-500 p-4">Box 3</div>
  <div class="bg-yellow-500 p-4">Box 4</div>
</div>

ในตัวอย่างนี้:

• col-span-2 ทำให้ Box 1 กินพื้นที่ 2 คอลัมน์
• row-span-2 ทำให้ Box 3 กินพื้นที่ 2 แถว

6. การจัดตำแหน่งองค์ประกอบใน Grid

คุณสามารถจัดตำแหน่งองค์ประกอบใน Grid ได้ด้วยคลาส:

• การจัดตำแหน่งในแนวนอน (Horizontal)
  • justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly
• การจัดตำแหน่งในแนวตั้ง (Vertical)
  • items-start, items-center, items-end, items-stretch

ตัวอย่าง:

<div class="grid grid-cols-3 items-center justify-center bg-gray-200 h-32">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

7. การเว้นระยะห่างใน Grid

Tailwind CSS รองรับการเว้นระยะห่างใน Grid ระหว่างคอลัมน์หรือแถวโดยใช้คลาส:

• gap-{value}: เว้นระยะห่างระหว่างคอลัมน์และแถว
• gap-x-{value}: เว้นระยะห่างระหว่างคอลัมน์เท่านั้น
• gap-y-{value}: เว้นระยะห่างระหว่างแถวเท่านั้น

ตัวอย่าง:

<div class="grid grid-cols-3 gap-x-8 gap-y-4 bg-gray-200 p-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

8. ตัวอย่างการใช้งาน Grid ในโปรเจกต์จริง

การออกแบบหน้า Gallery:

<div class="grid grid-cols-4 gap-4 p-4">
  <div class="bg-blue-500 h-32">Image 1</div>
  <div class="bg-green-500 h-32">Image 2</div>
  <div class="bg-red-500 h-32">Image 3</div>
  <div class="bg-yellow-500 h-32">Image 4</div>
</div>

การสร้าง Layout หน้าเว็บ:

<div class="grid grid-cols-3 gap-4">
  <aside class="col-span-1 bg-gray-700 text-white p-4">Sidebar</aside>
  <main class="col-span-2 bg-gray-100 p-4">Main Content</main>
</div>

สรุป

Grid Layout ใน Tailwind CSS ทำให้การออกแบบหน้าเว็บที่ซับซ้อนกลายเป็นเรื่องง่าย ด้วยชุด Utility Classes ที่ยืดหยุ่นและปรับแต่งได้ทันที ในบทต่อไป เราจะพูดถึง การจัดการ Background และ Borders ซึ่งช่วยเพิ่มความสวยงามและโครงสร้างให้กับหน้าเว็บ!