Grid span

Tailwind CSS Grid span

Use responsive grid span utilities with TW elements. Learn how to control how elements are sized and placed across grid columns and rows.

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>

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

Column starting and ending lines

Use the .col-start-{n} and .col-end-{n} classes to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.

Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.

HTML

        
            
        <div class="grid grid-cols-6 gap-4">
          <div class="... col-span-4 col-start-2">01</div>
          <div class="... col-start-1 col-end-3">02</div>
          <div class="... col-span-2 col-end-7">03</div>
          <div class="... col-start-1 col-end-7">04</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>

Row starting and ending lines

Use the .row-start-{n} and .row-end-{n} classes to make an element start or end at the nth grid line. These can also be combined with the .row-span-{n} utilities to span a specific number of rows.

Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

HTML

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

Grid span

Tailwind CSS Grid span

Spanning columns

Column starting and ending lines

Spanning rows

Row starting and ending lines

Access restricted

To view this section you must have an active PRO account

Grid span

Tailwind CSS Grid span

Spanning columns

Column starting and ending lines

Spanning rows

Row starting and ending lines

Related resources