Decision guide: when to reach for grid vs flexbox, with the same layout built both ways.

Classes#

reference
js
<!-- one axis of content → flex. two axes → grid. -->

Example#

example
html
<!-- one axis of content → flex. two axes → grid. -->

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Rows of things (nav, chips): flex
  • Layouts with rows AND columns: grid
  • Both compose: grid for page, flex for components

utilities/flexbox/flex-direction|Flexbox · utilities/spacing/gap|Gap