Flex & Grid

Twigwind provides powerful layout utilities for both Flexbox and CSS Grid, making it easy to create responsive and flexible layouts.

💡 Tip: Twigwind's flex syntax is unique and intuitive - use flex:direction-main-cross for complete control!

Display Utilities

Basic display utilities available in Twigwind:

flex - Sets display to flex
grid - Sets display to grid
inline - Sets display to inline
inline-block - Sets display to inline-block
block - Sets display to block
none - Sets display to none (hides element)

Basic Display Examples

<div class="flex">Flex container</div>
<div class="grid">Grid container</div>
<span class="block">Block-level span</span>
<div class="inline">Inline div</div>
<div class="none">Hidden element</div>

Flexbox Utilities

Twigwind's flexbox system uses an intuitive syntax: flex:direction-main-cross

Flex Direction

flex:row - Horizontal layout (default)
flex:col - Vertical layout

Main Axis Alignment (justify-content)

left - Align to start (flex-start)
center - Center alignment
right - Align to end (flex-end)

Cross Axis Alignment (align-items)

left - Align to start (flex-start)
center - Center alignment
right - Align to end (flex-end)

Flex Direction Examples

<!-- Row layouts -->
<div class="flex:row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Column layouts -->
<div class="flex:col">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Alignment Examples

<!-- Center everything -->
<div class="flex:row-center-center">
  <div>Perfectly centered</div>
</div>

<!-- Left-aligned, vertically centered -->
<div class="flex:row-left-center">
  <div>Left aligned</div>
  <div>Vertically centered</div>
</div>

<!-- Right-aligned, top aligned -->
<div class="flex:row-right-left">
  <div>Right aligned</div>
  <div>Top aligned</div>
</div>

<!-- Column with center alignment -->
<div class="flex:col-center-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Common Flex Patterns

Navigation Bar

<nav class="flex:row-left-center bg-blue p-10">
  <div class="font-bold color-white">Logo</div>
  <div class="flex:row-right-center">
    <a href="#" class="color-white mr-10">Home</a>
    <a href="#" class="color-white mr-10">About</a>
    <a href="#" class="color-white">Contact</a>
  </div>
</nav>

Card Layout

<div class="flex:row-left-center mb-10">
  <div class="bg-red size-md mr-10 p-10">Card 1</div>
  <div class="bg-green size-md mr-10 p-10">Card 2</div>
  <div class="bg-blue size-md p-10">Card 3</div>
</div>

CSS Grid Utilities

Twigwind provides a powerful grid system with the syntax: grid:columns,rows,gap

Grid Syntax

columns - Number of columns
rows - Number of rows
gap - Gap between grid items (optional)

Basic Grid Examples

<!-- 3 columns, 2 rows, no gap -->
<div class="grid:3,2">
  <div class="bg-red p-10">Item 1</div>
  <div class="bg-blue p-10">Item 2</div>
  <div class="bg-green p-10">Item 3</div>
  <div class="bg-yellow p-10">Item 4</div>
  <div class="bg-purple p-10">Item 5</div>
  <div class="bg-orange p-10">Item 6</div>
</div>

<!-- 2 columns, 3 rows, 10px gap -->
<div class="grid:2,3,10px">
  <div class="bg-cyan p-10">Item 1</div>
  <div class="bg-pink p-10">Item 2</div>
  <div class="bg-teal p-10">Item 3</div>
  <div class="bg-amber p-10">Item 4</div>
  <div class="bg-indigo p-10">Item 5</div>
  <div class="bg-brown p-10">Item 6</div>
</div>

Responsive Grid

Responsive Card Grid

<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="grid:1,auto,20px sm:grid:2,auto,20px lg:grid:3,auto,20px">
  <div class="bg-blue p-20 color-white">Card 1</div>
  <div class="bg-green p-20 color-white">Card 2</div>
  <div class="bg-red p-20 color-white">Card 3</div>
  <div class="bg-purple p-20 color-white">Card 4</div>
  <div class="bg-orange p-20 color-white">Card 5</div>
  <div class="bg-teal p-20 color-white">Card 6</div>
</div>

Grid with Different Gap Units

Various Gap Examples

<!-- Pixel gap -->
<div class="grid:2,2,15px">...</div>

<!-- Percentage gap -->
<div class="grid:3,2,5%">...</div>

<!-- Rem gap -->
<div class="grid:4,1,1rem">...</div>

<!-- No gap -->
<div class="grid:2,2">...</div>

Layout Combinations

Combine flex and grid for complex layouts:

Flex + Grid Layout

<!-- Main layout with flex -->
<div class="flex:col">
  <!-- Header -->
  <header class="flex:row-left-center bg-blue p-10">
    <h1 class="color-white">My App</h1>
  </header>
  
  <!-- Main content with grid -->
  <main class="grid:3,auto,20px p-20">
    <div class="bg-gray p-10">Sidebar</div>
    <div class="bg-white p-10">Content</div>
    <div class="bg-gray p-10">Aside</div>
  </main>
  
  <!-- Footer -->
  <footer class="flex:row-center-center bg-gray p-10">
    <p>© 2024 My App</p>
  </footer>
</div>

Responsive Layouts

Use responsive prefixes with flex and grid:

Responsive Examples

<!-- Stack on mobile, row on desktop -->
<div class="flex:col lg:flex:row-left-center">
  <div class="bg-blue p-10 mb-10 lg:mb-0 lg:mr-10">Sidebar</div>
  <div class="bg-white p-10">Main Content</div>
</div>

<!-- Different grid layouts per breakpoint -->
<div class="grid:1,auto,10px sm:grid:2,auto,15px lg:grid:4,auto,20px">
  <div class="bg-red p-10">Item 1</div>
  <div class="bg-blue p-10">Item 2</div>
  <div class="bg-green p-10">Item 3</div>
  <div class="bg-yellow p-10">Item 4</div>
</div>

✅ Twigwind's flex and grid systems work seamlessly with all other utilities including colors, spacing, and responsive prefixes!

⚠️ Note: Grid syntax uses commas, so avoid spaces around commas in class names: grid:3,2,10px not grid:3, 2, 10px