Layout with Flexbox and Grid

A navigation bar: logo on the left, links in the middle, a button on the right. You write flex, add justify-between, and the result is almost right — except the links aren't centered on the page, they float in the middle of the remaining space, and everything shifts as soon as a username is longer. You add flex-1, then an mx-auto, then a w-1/3 that fixes the symptom and breaks the display on mobile. An hour later, you have six patch classes and a fragile layout.

The problem is almost never Tailwind. It's that Flexbox and Grid serve different purposes, and half of all alignment difficulties come from picking the wrong one. Flexbox distributes elements along a single axis, letting their sizes adjust to their content: it's the tool for bars, button groups, and metadata rows. Grid lays down a two-dimensional structure decided in advance, independent of the content: it's the tool for card grids, page templates, and aligned forms. A navigation bar with three fixed zones is a Grid problem, not a Flexbox one — hence the lost hour.