Grid & Flex

1. Create a Grid Container

Always start with a parent element that has the .grid class.

<div class="grid">
  <!-- Items here -->
</div>

2. Set Number of Columns

Control the number of columns with .grid-cols-* classes:

<div class="grid grid-cols-2">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

3. Make It Responsive

Use responsive grid column classes to change layout at breakpoints:

• md: — Tablet (768px)
• lg: — Desktop (1280px)
• xl: — Large Desktop (1536px)

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  <!-- Items -->
</div>

4. Control Item Spans

Use .col-span-* classes to make an item span multiple columns. Responsive span utilities are also available.

• .col-span-1 — spans 1 column
• .col-span-2 — spans 2 columns
• .col-span-3 — spans 3 columns
• .col-span-6 — spans 6 columns
• .col-span-12 — spans 12 columns

<div class="grid grid-cols-4">
  <div class="col-span-2">Big item</div>
  <div>Small item</div>
  <div>Small item</div>
</div>

5. Add Gaps Between Items

Use gap utilities to control spacing between grid items:

• .gap-none — no gap
• .gap-xxs — extra extra small gap
• .gap-xs — extra small gap
• .gap-sm — small gap
• .gap-md — medium gap
• .gap-lg — large gap
• .gap-xl — extra large gap

<div class="grid grid-cols-2 gap-md">
  <!-- Items -->
</div>

Responsive gaps:

• md:gap-*
• lg:gap-*
• xl:gap-*

Row & Column separations:

• .gap-x-* - Column gap
• .gap-y-* - Row gap

6. Reorder Items with Order Utilities

Control the visual order of items without changing the HTML structure:

• .order-1, .order-2, etc. — set manual order
• .order-first — move item to start
• .order-last — move item to end

<div class="grid grid-cols-2">
  <div class="order-2">Second</div>
  <div class="order-1">First</div>
</div>

Responsive Order

Change order at breakpoints with prefixes like md:order-1, lg:order-2:

<div class="order-2 md:order-1">
  Text that moves up at tablet size
</div>

Quick Reference Cheat Sheet

• Start a grid: .grid
• Set 2 columns: .grid-cols-2
• Set 4 columns at desktop: lg:grid-cols-4
• Add a medium gap: .gap-md
• Span 2 columns: .col-span-2
• Reorder on tablet: .order-1 md:order-2

Final Reminders

• Always combine .grid, .grid-cols-*, and .gap-* inside a container.
• Mobile-first: layouts default to stacking unless specified with md:, lg:, or xl:.
• Use .order-* classes to change visual flow without changing the HTML.
• Gaps and containers are fluid and responsive based on your design tokens.

1. Create a Flex Container

Wrap your content in a parent element with .flex.

<div class="flex">
  <!-- Items here -->
</div>

2. Set Flex Direction

Control layout direction with .flex-h, .flex-v, .flex-h-rev, or .flex-v-rev:

<div class="flex flex-h">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

3. Make It Responsive

Apply breakpoints with md:, lg:, or xl::

<div class="flex flex-v md:flex-h lg:flex-v-rev">
  <!-- Items -->
</div>

4. Align and Justify Items

Use alignment classes to position children inside the container:

• .center — justify-content: center
• .left — justify-content: flex-start
• .right — justify-content: flex-end
• .top — align-items: flex-start
• .middle — align-items: center
• .bottom — align-items: flex-end
• .between, .around, .even — spaced distributions

<div class="flex flex-h between middle">
  <div>A</div>
  <div>B</div>
</div>

5. Add Wrapping

Enable wrapping with .wrap or reverse wrapping with .wrap-rev.

<div class="flex wrap gap-md">
  <div>Item</div>
  <div>Item</div>
</div>

6. Control Spacing

Use gap utilities for consistent spacing between items:

• .gap-none, .gap-xxs, .gap-xs, .gap-sm, .gap-md, .gap-lg, .gap-xl
• .gap-x-* — horizontal gaps
• .gap-y-* — vertical gaps

<div class="flex wrap gap-y-md gap-x-sm">
  <!-- Items -->
</div>

Responsive gaps:

• md:gap-*
• lg:gap-*
• xl:gap-*

Row & Column separations:

• .gap-x-* - Column gap
• .gap-y-* - Row gap

7. Control Flex Items

• .grow-0 through .grow-12 — sets flex-grow
• .shrink-0 through .shrink-12 — sets flex-shrink
• .base-10 through .base-1000 — sets fixed flex-basis in px increments

<div class="flex">
  <div class="grow-1">Flexible</div>
  <div class="base-200">Fixed</div>
</div>

8. Use Item Alignment Helpers

Inside grids or flex containers, position individual items:

• .item-t, .item-m, .item-b — vertical alignment
• .item-l, .item-c, .item-r — horizontal alignment
• .item-t-l, .item-t-c, .item-t-r, .item-c-l, .item-c-m, .item-c-r, .item-b-l, .item-b-c, .item-b-r — full matrix alignment

9. Reorder Items

Use order classes to change layout flow without altering markup:

• .order-1 through .order-12
• .order-first, .order-last

<div class="flex">
  <div class="order-2">Second</div>
  <div class="order-1">First</div>
</div>

10. Final Reminders

• Use .flex and direction classes to start layout.
• Wrap and align elements with intuitive utility classes.
• Responsive classes like md:flex-h let you adapt layouts smoothly.
• Combine gap, grow, shrink, and order classes for full control.