Grid column size

Tailwind CSS Grid column size

Use responsive grid column size utilities with TW elements. Examples of how to set the size of the columns 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>

Grid column size

Tailwind CSS Grid column size

Basic example

Spanning columns

Access restricted

To view this section you must have an active PRO account

Grid column size

Tailwind CSS Grid column size

Basic example

Spanning columns

Related resources