❮ Previous Next ❯

Alignment

  • Align grid items horizontally and vertically.

  • Why Alignment in Grid Needs Special Attention

    In Grid layouts, alignment can happen at two different levels:

    1. Inside each grid cell (how items align within a cell)

    2. Inside the grid container itself (how rows/columns align as a group)

    Many developers mix these up.

    In Tailwind CSS, alignment is simplified using shorthand utilities:

    • place-items-*

    • place-content-*

    But to use them correctly, you must understand what they actually control.

    Grid Alignment Axes

    CSS Grid has two axes:

    • Inline axis → left to right (columns)

    • Block axis → top to bottom (rows)

    Alignment utilities work across these axes simultaneously.

    Place Items 

    What Is place-items ?

    place-items controls how items are aligned inside their grid cells.

    It is a shorthand for:

    • align-items (vertical)

    • justify-items (horizontal)

    In simple terms:

    “How does content sit inside each grid box?”

    Syntax:

    place-items-{value}

    Common place-items Utilities

    ClassEffect
    place-items-startAlign items to top-left
    place-items-centerCenter items in cells
    place-items-endAlign items to bottom-right
    place-items-stretchStretch items (default)

Place Items Center

place-items-center centers grid items both horizontally and vertically inside their cells. 

<div class="grid grid-cols-3 h-48 place-items-center gap-4 bg-gray-100">
  <div class="bg-blue-200 p-2">1</div>
  <div class="bg-green-200 p-2">2</div>
  <div class="bg-red-200 p-2">3</div>
</div>

  • Result:

    • Each item is centered inside its own grid cell

    This is extremely useful for:

    • Icon grids

    • Dashboard stats

    • Media thumbnails

      When to Use Place Items

      Use place-items when:

      • Items are smaller than cells

      • You want consistent alignment in every cell

      • Content size varies

      Avoid when:

      • Items already stretch naturally

      • You need per-item control (use Flexbox inside cell instead)

        Place Content (Grid-Level Alignment)

        What is place-content ?

        place-content controls how the entire grid (rows + columns) is aligned inside the container.

        It is a shorthand for:

        • align-content

        • justify-content

        Important rule:

        place-content only works when the grid does not fully fill the container.

        Syntax:

        place-content-{value}

      • Common place-content Utilities
        ClassEffect
        place-content-startGrid packed at top-left
        place-content-centerGrid centered
        place-content-endGrid packed bottom-right
        place-content-betweenSpace between tracks
        place-content-aroundSpace around tracks
        place-content-evenlyEqual spacing

      Place Content Center

      place-content-center centers the entire grid content inside the container. 

      <div class="grid grid-cols-2 gap-4 h-64 place-content-center bg-gray-100">
  <div class="bg-blue-200 p-4">A</div>
  <div class="bg-green-200 p-4">B</div>
</div>

      • Result:

        • The grid itself is centered inside the container

        This is useful for:

        • Empty states

        • Dashboards with few widgets

        • Centered layouts

          Place Items vs Place Content

          UtilityControlsScope
          place-itemsItem alignment inside cellsIndividual grid items
          place-contentAlignment of rows/columnsEntire grid

          Rule to remember:

          place-items → inside cells
          place-content → inside container

        Place Content and Items Together

        place-content-center centers the grid area and place-items-center centers items inside each cell. 

        <div class="grid grid-cols-3 h-64 place-content-center place-items-center gap-4 bg-gray-100">
  <div class="bg-blue-200 p-4">1</div>
  <div class="bg-green-200 p-4">2</div>
  <div class="bg-red-200 p-4">3</div>
</div>

        • Effect:

          • Grid is centered inside container

          • Items are centered inside cells

          This creates perfectly balanced layouts.

          Alignment with Fixed vs Auto Size

          • place-items works regardless of container size

          • place-content requires:

            • Extra space

            • Fixed height or width

          Example that will not work:

          <div class="grid place-content-center">

          Why ?

          • No height defined → no extra space

          Correct usage:

          <div class="grid h-64 place-content-center">

        Grid Alignment

        place-items-center centers items in each grid cell and place-content-center centers the entire grid content. 

        <!-- Icon Dashboard -->
<div class="grid grid-cols-4 place-items-center gap-6">
  <div>📊</div>
  <div>📈</div>
  <div>📉</div>
  <div>⚙️</div>
</div>

<!-- Empty State -->
<div class="grid h-80 place-content-center place-items-center">
  <p>No data available</p>
</div>

        • Common Mistakes

          • Using place-content instead of place-items

          • Forgetting to set container height

          • Expecting alignment without extra space

          • Over-aligning everything visually

          • Mixing Grid and Flex alignment incorrectly

          Alignment utilities are powerful - but context matters.

          Best Practices for Grid Alignment

          • Use place-items for cell content alignment

          • Use place-content for overall grid positioning

          • Always ensure available space for place-content

          • Combine with Grid structure intentionally

          • Use Flexbox inside cells for complex content

        ❮ Previous Next ❯