Flexbox & Grid ​

Flex ​

Utilities for controlling how flex items both grow and shrink.

<div class="flex">
  <div class="flex-none w-14 h-14">01</div>
  <div class="flex-initial w-64 ...">02</div>
  <div class="flex-initial w-32 ...">03</div>
</div>

Basic usage ​

Initial ​

Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:

<div class="flex">
  <div class="flex-none w-14 h-14">01</div>
  <div class="flex-initial w-64 ...">02</div>
  <div class="flex-initial w-32 ...">03</div>
</div>

See more about Flex property on Tailwindcss Flex docs.

Gap ​

Utilities for controlling gutters between grid and flexbox items.

Basic usage ​

Setting the gap between elements ​

Use gap-{size} to change the gap between both rows and columns in grid and flexbox layouts.

<div class="grid gap-4 grid-cols-2">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Grid ​

Utilities for specifying the columns in a grid layout.

Basic usage ​

Specifying the columns in a grid ​

Use the grid-cols-{n} utilities to create grids with n equally sized columns.

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

Learn more about Flexbox & Grid on the Tailwindcss docs.