Grid gap

Tailwind CSS Grid gap

Use responsive grid gap utilities with TW elements. Learn how to control gutters between grid and flexbox items in simply way.

Basic example

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

Box 1

Box 2

Box 3

Box 4

HTML

        
            
        <div class="grid grid-cols-2 gap-6">
          <div>Box 1</div>
          <div>Box 2</div>
          <div>Box 3</div>
          <div>Box 4</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

Changing row and column gaps independently

If you want to change the gap size between rows and/or columns independently, you can use the gap-x-{size} and gap-y-{size} utility classes.

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

HTML

        
            
        <div class="grid grid-cols-3 gap-x-8 gap-y-4">
          <div>Box 1</div>
          <!-- ... -->
          <div>Box 9</div>
        </div>

Grid gap

Tailwind CSS Grid gap

Basic example

Changing row and column gaps independently

Access restricted

To view this section you must have an active PRO account

Grid gap

Tailwind CSS Grid gap

Basic example

Changing row and column gaps independently

Related resources