Gap

Basic usage

Setting the gap between elements

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

<div className="grid **gap-4** grid-cols-2">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Changing row and column gaps independently

Use gap-x-{size} and gap-y-{size} to change the gap between rows and columns independently.

<div className="grid **gap-x-8** **gap-y-4** grid-cols-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>