Grid Span

Grid span utilities let individual items stretch across multiple columns or rows. This is how you create hero sections that span the full width, or highlight cards that take up more space than others.

Column spanning

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-blue-100 p-4">Spans 2 columns</div>
  <div class="bg-blue-200 p-4">1 column</div>
  <div class="bg-blue-300 p-4">1 column</div>
</div>
    

Full width span

Use col-span-full to make an item span all columns.

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-full bg-yellow-100 p-4">Full width header</div>
  <div class="bg-blue-100 p-4">Column 1</div>
  <div class="bg-blue-200 p-4">Column 2</div>
  <div class="bg-blue-300 p-4">Column 3</div>
</div>
    

Row spanning

You can also span across rows in grid layouts.

<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div class="row-span-2 bg-red-100 p-4">Tall item — spans 2 rows</div>
  <div class="bg-red-200 p-4">Item 1</div>
  <div class="bg-red-300 p-4">Item 2</div>
</div>
    

Dashboard layout

Grid span is perfect for dashboards where different widgets need different amounts of space.

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 row-span-2 bg-white shadow rounded-lg p-6">
    <h3 class="font-bold text-lg mb-4">Main Chart — large widget</h3>
  </div>
  <div class="bg-white shadow rounded-lg p-4">Stat 1</div>
  <div class="bg-white shadow rounded-lg p-4">Stat 2</div>
  <div class="col-span-2 bg-white shadow rounded-lg p-4">Activity feed — spans 2 cols</div>
</div>