Part 24: Aligning Grid Tracks & Grid Template Areas

Just like Flexbox, CSS Grid offers powerful track alignment and item positioning utilities.

1. Place Items (place-items-*)

Sets both align-items and justify-items in a single utility: - place-items-center: Centers all items both vertically and horizontally within their grid cell!

<div class="grid grid-cols-3 place-items-center h-64 bg-slate-50 border rounded-xl">
  <div class="size-12 bg-blue-500 rounded-full"></div>
  <div class="size-12 bg-indigo-500 rounded-full"></div>
  <div class="size-12 bg-violet-500 rounded-full"></div>
</div>

2. Justify Items vs Justify Content in Grid

• justify-items-*: Aligns items inside their individual grid cells.
• justify-content-*: Aligns the entire grid track system inside the grid container when total column width is smaller than the container.

Key Takeaways

• Use place-items-center for instantaneous 2D centering inside grid cells.
• Distinguish between cell-level item alignment and container-level track distribution.

In Part 25, we will build Responsive Masonry & Dynamic Grids!