ใช้ Tailwind จัด layout ด้วย CSS Grid

เราสามารถใช้ tailwind จัด layout ด้วย grid แบบเดียวกับที่เราใช้ CSS Grid นั่นแหละแต่ข้อดีคือ เราไม่ต้องสลับกลับไปแก้ CSS เราจะทำงานอยู่แค่ tailwind เท่านั้น

คุณสามารถเข้าไปดูการจัดการ layout ด้วย CSS Grid เบื้องต้นได้ที่บทความเรื่องการจัดการ layout ด้วย CSS Grid ส่วนใครที่ยังไม่เคยใช้ Tailwind มาก่อนแนะนำให้อ่าน Tailwind เยื้องต้น ก่อน

Tailwind Grid

หลักการของการจัด layout แบบ grid system คือเราจะต้องทำ 2 ขั้นตอนนี้ก่อนคือ

1. กำหนด display เป็น grid ที่ element แม่หรือ container
2. ระบุจำนวน columns ที่จะแบ่ง(เอาความกว้างของ container มาหารด้วยจำนวน columns)

ซึ่งโดย default ความกว้างของทุก column จะเท่ากัน ตัวอย่างแรกเราจะแบ่งออกเป็น 4 columns

1
2
3
4
5

<div class="grid grid-cols-4">
  <div>01</div>
  <!-- ... -->
  <div>08</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้่

กำหนด Space ระหว่าง elements ด้วย Gap

เราสามารถใส่ พื้นที่ว่างเข้าไประหว่าง elements ได้ด้วย Gap

1
2
3
4
5

<div class="grid grid-cols-4 gap-3">
  <div>01</div>
  <!-- ... -->
  <div>08</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้่

ทำ Grid ซ้อน Grid(Sub-Grid)

เราสามารถนำ Grid มาซ้อนกันได้ โดยการใส่ class grid-cols-subgrid เข้าไป

1
2
3
4
5
6
7
8

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="grid grid-cols-subgrid gap-0.5 col-span-3">
    <div class="col-start-2">06</div>
  </div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้่

แต่ถ้าเราต้องการแบ่ง column เพิ่มให้ใส่ grid-cols-{จำนวน columns} เข้าไปแบบนี้

1
2
3
4
5
6
7
8

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="grid grid-cols-subgrid grid-cols-2 gap-0.5 col-span-3">
    <div class="col-start-2">06</div>
  </div>
</div>

ผลลัพธ์จะออกมาเป็น grid ซ้อนกัน 2 ชั้นแบบนี้

การ Merge Rows และ Merge Columns

เราสามารถ merge rows และ merge columns เหมือนใน excel ได้เลย

Merge Rows

ถ้าเราต้องการให้ 1 cell หรือ 1 item ของเรามีความสูงมากกว่า 1 แถวเราจะใช้ row-span-{จำนวนแถวที่ต้องการ merge}

1
2
3
4
5

<div class="grid grid-cols-4">
  <div class="row-span-2">01</div>
  <!-- ... -->
  <div>08</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

Merge Columns

ถ้าเราต้องการให้ 1 item ของเราใช้พื้นที่มากกว่า 1 column เราจะใช้ col-span-{จำนวน columns ที่ต้องการ merge}

1
2
3
4
5

<div class="grid grid-cols-4">
  <div class="col-span-3">01</div>
  <!-- ... -->
  <div>06</div>
</div>

ในตัวอย่างนี้เราให้ div แรกใช้พื้นที่ 3 column ผลลัพธ์จะออกมาแบบนี้

เราสามารถใส่ทั้ง col-span และ row-span ได้พร้อมๆกัน

Tailwind Grid Generator

เหมือนกับ CSS Grid Generator เราสามารถใช้เครื่องมือช่วย Generate CSS ออกมาให้เราโดยที่เราเข้าไปเลือก items ที่เราต้องการแสดงผล ระบบจะ generate html ที่ใช้ tailwind css class ออกมาให้เรานำไปใช้ต่อได้เลย

ในตัวอย่างนี้ผมใช้ https://www.tailwindgen.com เป็นตัว generate เราแต่เลือกจำนวนแถวและจำนวน columns เลือก items ที่ต้องการ และอย่าลืมเปลี่ยนจาก JSX เป็น HTML(แต่ถ้าใครใช้ React ก็เอา JSX ไปใช้ได้เลย) หลังจากนั้นเราจะได้ html ออกมาแบบนี้

<div class="grid grid-cols-3 grid-rows-3 gap-2">
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div class="col-start-2">4</div>
    <div class="col-start-3">5</div>
    <div class="col-start-2 row-start-3">6</div>
    <div class="col-start-3 row-start-3">7</div>
</div>

col-start และ row-start ใช้ในกรณีที่เราไม่ได้เริ่มจาก element ทางซ้าย(การจัดเรียงแบบปกติ) ในกรณีนี้ผมเว้นพื้นที่ใต้ column 1 ไว้เราเลยกำหนดให้

• item ที่ 4 เริ่มต้นที่ column ที่ 2
• item ที่ 5 เริ่มต้นที่ column ที่ 3
• item ที่ 6 เริ่มต้นที่ column ที่ 2 และแถวที่ 3
• item ที่ 7 เริ่มต้นที่ column ที่ 2 และแถวที่ 3

อ่านต่อเพิ่มเติมที่

• การจัดการ layout ด้วย CSS Grid
• https://tailwindcss.com/docs/grid-template-columns