0Pricing
Tailwind CSS Academy · บทเรียน

ช่องว่าง การจัดเนื้อหา และการจัดแนวใน Grid

เพิ่มช่องว่างระหว่างเซลล์ Grid ด้วย gap-x-* และ gap-y-* และจัดแนวรายการภายในพื้นที่ Grid ด้วย justify-items-* และ place-items-*

ช่องว่าง การจัดเนื้อหา และการจัดแนวใน Grid เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Spacing Between Grid Cells

Once your grid columns and rows are defined, the next step is controlling the space between cells. Tailwind's gap-* utilities map directly to the CSS gap shorthand, which sets both row and column gutters simultaneously. A single gap-4 (16px) class gives consistent spacing in all directions, keeping your layout balanced without any custom CSS.

<!-- Uniform gap in all directions -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4 rounded">A</div>
  <div class="bg-blue-100 p-4 rounded">B</div>
  <div class="bg-blue-100 p-4 rounded">C</div>
  <div class="bg-blue-100 p-4 rounded">D</div>
  <div class="bg-blue-100 p-4 rounded">E</div>
  <div class="bg-blue-100 p-4 rounded">F</div>
</div>

gap-x-* and gap-y-* Utilities

When you need different spacing between columns versus between rows, use gap-x-* for horizontal gutters and gap-y-* for vertical gutters. For example, gap-x-8 gap-y-4 gives wide horizontal space between columns and tighter vertical space between rows. This lets you fine-tune the visual rhythm of your grid independently in each direction.

<!-- Wide horizontal gap, tight vertical gap -->
<div class="grid grid-cols-3 gap-x-10 gap-y-2">
  <div class="bg-green-100 p-3 rounded">A</div>
  <div class="bg-green-100 p-3 rounded">B</div>
  <div class="bg-green-100 p-3 rounded">C</div>
  <div class="bg-green-100 p-3 rounded">D</div>
  <div class="bg-green-100 p-3 rounded">E</div>
  <div class="bg-green-100 p-3 rounded">F</div>
</div>

Justify Items — Horizontal Cell Alignment

justify-items-* controls how items are aligned horizontally within their grid cell. The four values are justify-items-start, justify-items-center, justify-items-end, and justify-items-stretch (the default). When items are stretched, they fill the full width of their cell. Centering is common for icon-based grids where you want each icon centered in its column.

<!-- Icons centered within each grid cell -->
<div class="grid grid-cols-4 gap-6 justify-items-center">
  <div class="text-4xl">📷</div>
  <div class="text-4xl">🎵</div>
  <div class="text-4xl">📚</div>
  <div class="text-4xl">🎮</div>
</div>

Align Items — Vertical Cell Alignment

align-items-* in a grid context controls how items align vertically within their row track. items-start anchors items to the top of the row, items-center vertically centers them, and items-end pushes them to the bottom. The default is items-stretch, making items fill their row height. This is different from Flexbox's align-items but uses the same class names in Tailwind.

<!-- Grid row with mixed-height cells, items aligned to center -->
<div class="grid grid-cols-3 gap-4 items-center h-32">
  <div class="bg-purple-200 p-2 rounded h-8">Short</div>
  <div class="bg-purple-200 p-6 rounded">Tall</div>
  <div class="bg-purple-200 p-2 rounded h-12">Medium</div>
</div>

place-items for Both Axes at Once

The place-items-* utility is a shorthand that sets both align-items and justify-items simultaneously. place-items-center perfectly centers each grid item both horizontally and vertically within its cell — a two-liner that previously required two separate CSS properties. This is ideal for icon grids, avatar displays, and any grid where items need to float in the middle of their cells.

<!-- Avatar cards, each item perfectly centered in its cell -->
<div class="grid grid-cols-4 gap-4 place-items-center">
  <div class="w-16 h-16 bg-red-400 rounded-full flex items-center justify-center text-white font-bold">JD</div>
  <div class="w-16 h-16 bg-blue-400 rounded-full flex items-center justify-center text-white font-bold">AB</div>
  <div class="w-16 h-16 bg-green-400 rounded-full flex items-center justify-center text-white font-bold">CK</div>
  <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center text-white font-bold">MR</div>
</div>

Justify Content — Aligning the Whole Grid

When the total width of your grid columns is less than the container width, justify-content-* positions the entire grid block horizontally within the container. justify-center centers the column group, justify-between spreads columns to the edges, and justify-around adds even space around each column. This is distinct from justify-items, which aligns items within cells.

<!-- Fixed-width columns centered within a wide container -->
<div class="grid gap-4 justify-center" style="grid-template-columns: repeat(3, 100px)">
  <div class="bg-orange-100 p-4 rounded">A</div>
  <div class="bg-orange-100 p-4 rounded">B</div>
  <div class="bg-orange-100 p-4 rounded">C</div>
</div>

Align Content — Vertical Grid Positioning

align-content-* controls how the entire set of grid rows is positioned vertically when total row height is less than the container. content-center vertically centers all rows, content-between spreads them to the top and bottom, and content-evenly distributes them with equal space. This is particularly useful in fixed-height containers like a dashboard widget.

<!-- 2 rows centered in a tall container -->
<div class="grid grid-cols-2 gap-4 h-64 content-center">
  <div class="bg-teal-100 p-4 rounded">Row 1, A</div>
  <div class="bg-teal-100 p-4 rounded">Row 1, B</div>
  <div class="bg-teal-100 p-4 rounded">Row 2, A</div>
  <div class="bg-teal-100 p-4 rounded">Row 2, B</div>
</div>

place-content — Grid-Level Shorthand

place-content-* is the shorthand that combines align-content and justify-content in one utility. place-content-center centers the entire grid in its container both horizontally and vertically. This is useful for centered full-screen grids, loading screens, or any time you want the grid block itself to sit in the middle of a larger area.

<!-- Grid block centered inside the viewport -->
<div class="grid h-screen place-content-center gap-6" style="grid-template-columns: repeat(2, 200px)">
  <div class="bg-sky-200 p-8 rounded text-center">Option A</div>
  <div class="bg-sky-200 p-8 rounded text-center">Option B</div>
</div>

Per-Item Overrides With justify-self and align-self

Sometimes you need one specific item to behave differently from the rest of the grid. justify-self-* overrides justify-items for a single cell, and align-self-* overrides align-items. For instance, you might use justify-self-end to push a single action button to the right inside its cell while all other cells remain left-aligned.

<!-- Most items default, but last button right-aligned -->
<div class="grid grid-cols-3 gap-4 items-start">
  <div class="bg-gray-100 p-4">Content A</div>
  <div class="bg-gray-100 p-4">Content B</div>
  <button class="justify-self-end bg-blue-500 text-white px-4 py-2 rounded self-center">
    Action
  </button>
</div>

place-self — Per-Item Shorthand

place-self-* is the per-item shorthand combining align-self and justify-self. The most powerful value is place-self-center, which centers an individual item both horizontally and vertically within its cell, regardless of what the parent grid specifies. This is handy for centering an icon or spinner inside a fixed-size grid cell.

<!-- One loading spinner centered in its grid cell -->
<div class="grid grid-cols-3 gap-4 h-32">
  <div class="bg-gray-100 p-4 rounded">Content</div>
  <div class="bg-gray-100 rounded place-self-center">
    <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  <div class="bg-gray-100 p-4 rounded">Content</div>
</div>

Complete Grid Alignment Reference

Here is a quick mental model for grid alignment in Tailwind: justify-items / align-items — align children within cells (item level). justify-content / align-content — position the whole grid block within the container (track level). justify-self / align-self — override alignment for a single item. Pair these with the shorthand place-* variants to handle both axes at once.

<!-- Summary: centered grid, stretched items, one overridden -->
<div class="grid grid-cols-3 gap-6 place-content-center place-items-center h-48">
  <div class="w-20 h-20 bg-indigo-200 rounded flex items-center justify-center">A</div>
  <div class="w-20 h-20 bg-indigo-300 rounded flex items-center justify-center">B</div>
  <!-- Override: this item aligns to end instead of center -->
  <div class="w-20 h-20 bg-indigo-400 rounded flex items-center justify-center self-end">
    C
  </div>
</div>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: gap-x-* and gap-y-* control horizontal and vertical gutters independently, justify-items and align-items position content within each grid cell, and justify-content and align-content position the entire grid within its container. Next up we move to sizing utilities that control element widths and heights.

คำถามที่พบบ่อย

บทเรียน “ช่องว่าง การจัดเนื้อหา และการจัดแนวใน Grid” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ช่องว่าง การจัดเนื้อหา และการจัดแนวใน Grid” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ช่องว่าง การจัดเนื้อหา และการจัดแนวใน Grid”

เพิ่มช่องว่างระหว่างเซลล์ Grid ด้วย gap-x-* และ gap-y-* และจัดแนวรายการภายในพื้นที่ Grid ด้วย justify-items-* และ place-items-* คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ช่องว่าง การจัดเนื้อหา และการจัดแนวใน Grid” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การกำหนดคอลัมน์ Grid
  2. การครอบคลุมหลายคอลัมน์และแถว
  3. แถว Grid และการวางอัตโนมัติ
  4. ช่องว่าง การจัดเนื้อหา และการจัดแนวใน Grid
← กลับไปที่ Tailwind CSS Academy