Overview
CARDS

Flexbox

Tailwind CSS Flexbox

Use responsive flexbox component to control the initial size of flex items, how flex items grow and shrink

Basis

Use the basis-{size} utilities to set the initial size of flex items.

01

02

03

HTML

        
            
        <div class="flex flex-row">
          <div class="basis-1/4">01</div>
          <div class="basis-1/4">02</div>
          <div class="basis-1/2">03</div>
        </div>

Grid

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

01

02

03

04

05

06

07

08

09

HTML

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

Rows

Use the row-span-{n} utilities to make an element span n rows

01

02

03

HTML

        
            
        <div class="grid grid-flow-col grid-rows-3 gap-4">
          <div class="... row-span-3">01</div>
          <div class="... col-span-2">02</div>
          <div class="... col-span-2 row-span-2">03</div>
        </div>

Basis
Grid
Rows
Related resources