Grid size

Tailwind CSS Grid size

Use responsive grid size utilities with TW elements. Examples of how to set the grid size in an easy way.

Basic example

Use the grid-cols-{n} utilities to create grids with n equally sized columns. The maximum number of columns {n} is 12.

HTML

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

        <!-- Second grid -->
        <div class="grid grid-cols-6 gap-4">
          <div>01</div>
          <!-- ... -->
          <div>06</div>
        </div>

Need even more robust tables? Try Data Den.

Quick customization & hyper-focus on data management
Easily integrate it with any project (not only MDB)
Column Pinning, Drag&Drop Columns, Advanced Filtering & much more

For enterprise projects & users seeking advanced data controls. Tailor your data your way.

get early access explore

Spanning columns

Use the .col-span-{n} class to make an element span n columns.

HTML

        
            
        <div class="grid grid-cols-3 gap-4">
          <div class="...">01</div>
          <div class="...">02</div>
          <div class="...">03</div>
          <div class="... col-span-2">04</div>
          <div class="...">05</div>
          <div class="...">06</div>
          <div class="... col-span-2">07</div>
        </div>

Spanning rows

Use the .row-span-{n} class 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>

Grid size

Tailwind CSS Grid size

Basic example

Spanning columns

Spanning rows

Access restricted

To view this section you must have an active PRO account

Grid size

Tailwind CSS Grid size

Basic example

Spanning columns

Spanning rows

Related resources