Tailwind CSS Flexbox & Grid

Flexbox and Grid are the two cornerstones of modern CSS layout. Tailwind provides comprehensive and intuitive utility classes for them, allowing you to easily build any type of responsive layout.

Flexbox

To use Flexbox, first add the flex class to a container element.

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Direction

Control the direction of the main axis.

• flex-row: (default) Child elements are arranged horizontally.
• flex-row-reverse: Child elements are arranged horizontally in reverse order.
• flex-col: Child elements are arranged vertically.
• flex-col-reverse: Child elements are arranged vertically in reverse order.

Justify Content

Control how child elements align on the main axis.

• justify-start: (default) Align from the start of the main axis.
• justify-center: Center align on the main axis.
• justify-end: Align from the end of the main axis.
• justify-between: Space between, equal space between items.
• justify-around: Equal space on both sides of each item.

Align Items

Control how child elements align on the cross axis.

• items-start: Align at the start of the cross axis.
• items-center: Center align on the cross axis.
• items-end: Align at the end of the cross axis.
• items-baseline: Baseline alignment.
• items-stretch: (default) Stretch to fill the cross axis.

Flex Grow & Shrink

Control the growth and shrink ratios of child elements.

• grow: Allow element to grow to fill available space (flex-grow: 1).
• grow-0: Don't allow element to grow.
• shrink: Allow element to shrink (flex-shrink: 1).
• shrink-0: Don't allow element to shrink.

Grid

To use Grid layout, first add the grid class to the container.

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <!-- ... -->
  <div>9</div>
</div>

Grid Template Columns & Rows

Define the number of columns and rows for the grid.

• grid-cols-3: Create a three-column grid.
• grid-rows-2: Create a two-row grid.
• Tailwind provides preset column/row counts from 1 to 12.

Gap

Control the spacing between grid items.

• gap-4: Set spacing in all directions.
• gap-x-8: Set only horizontal (column) spacing.
• gap-y-2: Set only vertical (row) spacing.

Spanning Columns & Rows

Make a grid item span multiple columns or rows.

• col-span-2: Make an item span two columns wide.
• row-span-3: Make an item span three rows high.

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 ...">...</div>
  <div>...</div>
  <div>...</div>
  <div class="col-span-3 ...">...</div>
</div>

Starting and Ending Lines

Precisely control the start and end positions of grid items.

• col-start-2: Make an item start from the second column grid line.
• col-end-5: Make an item end at the fifth column grid line.

Flexbox and Grid are very powerful layout tools. Flexbox is better suited for one-dimensional layouts (single row or column), while Grid is better for two-dimensional layouts (handling rows and columns simultaneously). By combining them, you can build any complex modern web layout.