gap

Use gap-fluid-[breakpoints] utilities like gap-fluid-[10px,18px] and gap-fluid-[4,8] to change the gap between both rows and columns in grid and flexbox layouts:

<div className="grid grid-cols-2 gap-fluid-[8px,24px]">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Use gap-x-fluid-[breakpoints] and gap-y-fluid-[breakpoints] utilities to set the horizontal and vertical gap between grid and flexbox items:

<div className="grid grid-cols-2 gap-x-fluid-[32px,48px] gap-y-fluid-[12px,18px]">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>