Advanced Alignment, Gap, and Order Utilities

Beyond the core justify-content and align-items properties, Tailwind exposes the full range of CSS alignment utilities. The place-items-center shorthand sets both align-items and justify-items to center in one class — useful for grid cells. place-content-center, place-self-*, justify-items-*, and align-content-* round out the complete alignment API for both grid and flex contexts. The order utilities (order-first, order-last, order-none, and order-1 through order-12) control the visual order of flex and grid items independently of their DOM order. This is particularly valuable for responsive reordering: a sidebar that appears last in the HTML for screen readers can be moved visually to the left on desktop with lg:order-first without duplicating markup. Gap utilities have grown more powerful in Tailwind v3. gap-x and gap-y allow independent control of horizontal and vertical gutters, which is especially useful for grids where you want tighter vertical spacing and wider horizontal spacing, or vice versa. Combined with the row-gap and column-gap CSS properties, you get precise control over how grid and flex children are spaced in both directions without resorting to padding hacks.

Example

<!-- place-items-center: center both axes in a grid cell -->
<div class="grid grid-cols-3 gap-4 h-48">
  <div class="bg-gray-100 rounded flex items-center justify-center">A</div>
  <div class="bg-gray-200 rounded grid place-items-center">B (grid)</div>
  <div class="bg-gray-300 rounded flex place-items-center">C</div>
</div>

<!-- Responsive order: sidebar before content on desktop -->
<div class="flex flex-col lg:flex-row gap-6">
  <!-- DOM order: main first (good for SEO/a11y) -->
  <main class="flex-1 order-2 lg:order-1 bg-white rounded-xl p-6">
    Main content
  </main>
  <!-- Sidebar comes second in DOM but appears left on lg+ -->
  <aside class="w-full lg:w-64 order-1 lg:order-first bg-gray-50 rounded-xl p-4">
    Sidebar
  </aside>
</div>

<!-- Asymmetric gap -->
<div class="grid grid-cols-2 gap-x-8 gap-y-3">
  <label class="text-sm font-medium text-gray-700">First Name</label>
  <input class="border rounded px-3 py-1.5" />
  <label class="text-sm font-medium text-gray-700">Last Name</label>
  <input class="border rounded px-3 py-1.5" />
  <label class="text-sm font-medium text-gray-700">Email</label>
  <input class="border rounded px-3 py-1.5 col-span-1" />
</div>

<!-- align-content for multi-row flex containers -->
<div class="flex flex-wrap content-start gap-4 h-64 bg-gray-50 p-4 rounded">
  <div class="bg-blue-200 px-4 py-2 rounded">Tag 1</div>
  <div class="bg-blue-200 px-4 py-2 rounded">Tag 2</div>
  <div class="bg-blue-200 px-4 py-2 rounded">Tag 3</div>
  <div class="bg-blue-200 px-4 py-2 rounded">Tag 4</div>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned