ContextQMD
Back to Tailwindcss

Gap

src/docs/gap.mdx

latest3.1 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "gap"; export const description = "Utilities for controlling gutters between grid and flexbox items.";

<ApiTable rows={[ ["gap-<number>", "gap: calc(var(--spacing) * <value>);"], ["gap-(<custom-property>)", "gap: var(<custom-property>);"], ["gap-[<value>]", "gap: <value>;"], ["gap-x-<number>", "column-gap: calc(var(--spacing) * <value>);"], ["gap-x-(<custom-property>)", "column-gap: var(<custom-property>);"], ["gap-x-[<value>]", "column-gap: <value>;"], ["gap-y-<number>", "row-gap: calc(var(--spacing) * <value>);"], ["gap-y-(<custom-property>)", "row-gap: var(<custom-property>);"], ["gap-y-[<value>]", "row-gap: <value>;"], ]} />

Examples

Basic example

Use gap-<number> utilities like gap-2 and gap-4 to change the gap between both rows and columns in grid and flexbox layouts:

<Figure> <Example> { <div className="grid grid-cols-1"> <Stripes border className="col-start-1 row-start-1 rounded-lg" /> <div className="col-start-1 row-start-1 grid grid-cols-2 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white"> <div className="rounded-lg bg-violet-500 p-4">01</div> <div className="rounded-lg bg-violet-500 p-4">02</div> <div className="rounded-lg bg-violet-500 p-4">03</div> <div className="rounded-lg bg-violet-500 p-4">04</div> </div> </div> } </Example>
html
<!-- [!code classes:gap-4] -->
<div class="grid grid-cols-2 gap-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
</Figure>

Changing row and column gaps independently

Use gap-x-<number> or gap-y-<number> utilities like gap-x-8 and gap-y-4 to change the gap between columns and rows independently:

<Figure> <Example> { <div className="grid grid-cols-1"> <Stripes border className="col-start-1 row-start-1 rounded-lg" /> <div className="col-start-1 row-start-1 grid grid-cols-3 gap-x-8 gap-y-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white"> <div className="rounded-lg bg-sky-500 p-4">01</div> <div className="rounded-lg bg-sky-500 p-4">02</div> <div className="rounded-lg bg-sky-500 p-4">03</div> <div className="rounded-lg bg-sky-500 p-4">04</div> <div className="rounded-lg bg-sky-500 p-4">05</div> <div className="rounded-lg bg-sky-500 p-4">06</div> </div> </div> } </Example>
html
<!-- [!code classes:gap-x-8,gap-y-4] -->
<div class="grid grid-cols-3 gap-x-8 gap-y-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
</Figure>

Using a custom value

<UsingACustomValue utilities={["gap", "gap-x", "gap-y"]} value="10vw" />

Responsive design

<ResponsiveDesign properties={["gap", "column-gap", "row-gap"]} defaultClass="grid gap-4" featuredClass="gap-6" />