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.

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.

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

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>

Flexbox

Tailwind CSS Flexbox

Basis

Grid

Rows

Access restricted

To view this section you must have an active PRO account

Flexbox

Tailwind CSS Flexbox

Basis

Grid

Rows

Related resources