Grid Layout 😎#

• หลายๆ คนอาจจะเคยเห็น layout ที่มีลักษณะเป็นกล่องเรียงกันอย่างเช่นเว็บ Pinterest ซึ่งอาจจะเรียงอย่างเท่าๆกัน หรือไม่เท่ากันก็ได้ ซึ่งการทำ layout แบบนี้ เราสามารถใช้ Grid Layout ในการจัดการ layout ได้ง่าย และสะดวกมากขึ้น
• ใน Tailwind CSS มีคลาสที่ชื่อว่า grid ที่เราสามารถใช้ได้เลย โดยไม่ต้องกำหนดค่าใดๆ เพิ่มเติม ซึ่งจะทำให้เราสามารถใช้ Grid Layout ได้อย่างง่ายดาย

การใช้งาน Grid Layout#

1. เพิ่ม Class ไปที่ Container ของเรา ซึ่งในที่นี้เราจะใช้ div#

• เพิ่ม class grid เข้าไปใน element ที่ต้องการใช้ Grid Layout

<div class="grid"> 
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
</div>

2. กำหนดจำนวน Column หรือ Row ของ Grid Layout โดยใช้ จำนวน (Number) ที่ต้องการ#

• กำหนดจำนวน column โดยใช้ class grid-cols-{number} เช่น grid-cols-3 หมายถึงมี 3 column

<div class="grid grid-cols-3"> 
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
    <div> 4 </div>
</div>

หากจำนวน content ใน div มากกว่าจำนวน column ที่กำหนดไว้ จะมีการขึ้นบรรทัดใหม่โดยอัตโนมัติ

• เรายังสามารถกำหนดจำนวน row โดยใช้ class grid-rows-{number} เช่น grid-rows-4 หมายถึงมี 4 row

<div class="grid grid-rows-4"> 
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
    <div> 4 </div>
</div>

3. กำหนดจำนวน Column หรือ Row ของ Grid Layout โดยอิงจากขนาด (Size)#

• กำหนดขนาดของ column และ row โดยใช้ class grid-cols-{size} และ grid-rows-{size} เช่น grid-cols-[1fr, 2fr, 1fr] หมายถึง column แรกมีขนาด 1 fraction, column ที่สองมีขนาด 2 fraction, และ column สุดท้ายมีขนาด 1 fraction

<div class="grid-cols-[1fr, 2fr, 1fr]"> 
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
    <div> 4 </div>
    <div> 5 </div>
    <div> 6 </div>
</div>

4. การวางแนวของ Grid Layout โดยใช้ class grid-flow-{direction}#

• กำหนดการจัดวาง item ใน grid โดยใช้ class grid-flow-{direction} เช่น
  1. grid-flow-col หมายถึงจัดวาง item จากขวาไปซ้าย ➡
  2. grid-flow-row หมายถึงจัดวาง item จากบนลงล่าง ⬇
  3. grid-flow-row-dense หมายถึงจัดวาง item จากบนลงล่างและเติมช่องว่างที่เหลือด้วย item อื่นๆ

<div class="grid-flow-col"> 
    example code coming soon
</div>

Insert Picture - example code coming soon

5. การจัดวาง item ใน grid โดยใช้ class grid-col-{start}/{end} และ grid-row-{start}/{end}#

• กำหนดการจัดวาง item ใน grid โดยใช้ class grid-col-{start}/{end} และ grid-row-{start}/{end} เช่น
  1. grid-col-2/4 หมายถึง item นั้นจะขยายไปจนถึง column ที่ 4
  2. grid-row-3/5 หมายถึง item นั้นจะขยายไปจนถึง row ที่ 5

<div class="grid-col-2/4"> 
    example code coming soon
</div>

Insert Picture - example code coming soon

6. การจัดวาง item ใน grid โดยใช้ class col-start-{number} และ col-end-{number}#

• กำหนดการจัดวาง item ใน grid โดยใช้ class col-start-{number} และ col-end-{number} เช่น

  1. col-start-2 หมายถึง item นั้นจะเริ่มต้นที่ column ที่ 2
  2. col-end-4 หมายถึง item นั้นจะสิ้นสุดที่ column ที่ 4

• กำหนดการจัดวาง item ใน grid โดยใช้ class row-start-{number} และ row-end-{number} เช่น

  1. row-start-3 หมายถึง item นั้นจะเริ่มต้นที่ row ที่ 3
  2. row-end-5 หมายถึง item นั้นจะสิ้นสุดที่ row ที่ 5

<div class="col-start-2"> 
    example code coming soon
</div>

<div class="row-start-3"> 
    example code coming soon
</div>

Insert Picture - example code coming soon

เทคนิคการใช้ Grid แบบง่ายๆ ดูจบบรรลุ 😎🔥#

ตามไปดูได้ที่: Cand Dev

สรุปวิธีการใช้ Grid จากคลิปด้านบน#

1. สร้าง container และกำหนดให้เป็น grid โดยใช้ class grid
2. coming soon

ขอบคุณสำหรับการอ่านครับ หวังว่าจะชอบ Content เกี่ยวกับการใช้ Grid ใน tailwindCSS นะครับ 🤝