1. 弹性盒 & 网格
  2. 缺口

Quick reference

属性
gap-0gap: 0px;
gap-x-0column-gap: 0px;
gap-y-0row-gap: 0px;
gap-pxgap: 1px;
gap-x-pxcolumn-gap: 1px;
gap-y-pxrow-gap: 1px;
gap-0.5gap: 0.125rem; /* 2px */
gap-x-0.5column-gap: 0.125rem; /* 2px */
gap-y-0.5row-gap: 0.125rem; /* 2px */
gap-1gap: 0.25rem; /* 4px */
gap-x-1column-gap: 0.25rem; /* 4px */
gap-y-1row-gap: 0.25rem; /* 4px */
gap-1.5gap: 0.375rem; /* 6px */
gap-x-1.5column-gap: 0.375rem; /* 6px */
gap-y-1.5row-gap: 0.375rem; /* 6px */
gap-2gap: 0.5rem; /* 8px */
gap-x-2column-gap: 0.5rem; /* 8px */
gap-y-2row-gap: 0.5rem; /* 8px */
gap-2.5gap: 0.625rem; /* 10px */
gap-x-2.5column-gap: 0.625rem; /* 10px */
gap-y-2.5row-gap: 0.625rem; /* 10px */
gap-3gap: 0.75rem; /* 12px */
gap-x-3column-gap: 0.75rem; /* 12px */
gap-y-3row-gap: 0.75rem; /* 12px */
gap-3.5gap: 0.875rem; /* 14px */
gap-x-3.5column-gap: 0.875rem; /* 14px */
gap-y-3.5row-gap: 0.875rem; /* 14px */
gap-4gap: 1rem; /* 16px */
gap-x-4column-gap: 1rem; /* 16px */
gap-y-4row-gap: 1rem; /* 16px */
gap-5gap: 1.25rem; /* 20px */
gap-x-5column-gap: 1.25rem; /* 20px */
gap-y-5row-gap: 1.25rem; /* 20px */
gap-6gap: 1.5rem; /* 24px */
gap-x-6column-gap: 1.5rem; /* 24px */
gap-y-6row-gap: 1.5rem; /* 24px */
gap-7gap: 1.75rem; /* 28px */
gap-x-7column-gap: 1.75rem; /* 28px */
gap-y-7row-gap: 1.75rem; /* 28px */
gap-8gap: 2rem; /* 32px */
gap-x-8column-gap: 2rem; /* 32px */
gap-y-8row-gap: 2rem; /* 32px */
gap-9gap: 2.25rem; /* 36px */
gap-x-9column-gap: 2.25rem; /* 36px */
gap-y-9row-gap: 2.25rem; /* 36px */
gap-10gap: 2.5rem; /* 40px */
gap-x-10column-gap: 2.5rem; /* 40px */
gap-y-10row-gap: 2.5rem; /* 40px */
gap-11gap: 2.75rem; /* 44px */
gap-x-11column-gap: 2.75rem; /* 44px */
gap-y-11row-gap: 2.75rem; /* 44px */
gap-12gap: 3rem; /* 48px */
gap-x-12column-gap: 3rem; /* 48px */
gap-y-12row-gap: 3rem; /* 48px */
gap-14gap: 3.5rem; /* 56px */
gap-x-14column-gap: 3.5rem; /* 56px */
gap-y-14row-gap: 3.5rem; /* 56px */
gap-16gap: 4rem; /* 64px */
gap-x-16column-gap: 4rem; /* 64px */
gap-y-16row-gap: 4rem; /* 64px */
gap-20gap: 5rem; /* 80px */
gap-x-20column-gap: 5rem; /* 80px */
gap-y-20row-gap: 5rem; /* 80px */
gap-24gap: 6rem; /* 96px */
gap-x-24column-gap: 6rem; /* 96px */
gap-y-24row-gap: 6rem; /* 96px */
gap-28gap: 7rem; /* 112px */
gap-x-28column-gap: 7rem; /* 112px */
gap-y-28row-gap: 7rem; /* 112px */
gap-32gap: 8rem; /* 128px */
gap-x-32column-gap: 8rem; /* 128px */
gap-y-32row-gap: 8rem; /* 128px */
gap-36gap: 9rem; /* 144px */
gap-x-36column-gap: 9rem; /* 144px */
gap-y-36row-gap: 9rem; /* 144px */
gap-40gap: 10rem; /* 160px */
gap-x-40column-gap: 10rem; /* 160px */
gap-y-40row-gap: 10rem; /* 160px */
gap-44gap: 11rem; /* 176px */
gap-x-44column-gap: 11rem; /* 176px */
gap-y-44row-gap: 11rem; /* 176px */
gap-48gap: 12rem; /* 192px */
gap-x-48column-gap: 12rem; /* 192px */
gap-y-48row-gap: 12rem; /* 192px */
gap-52gap: 13rem; /* 208px */
gap-x-52column-gap: 13rem; /* 208px */
gap-y-52row-gap: 13rem; /* 208px */
gap-56gap: 14rem; /* 224px */
gap-x-56column-gap: 14rem; /* 224px */
gap-y-56row-gap: 14rem; /* 224px */
gap-60gap: 15rem; /* 240px */
gap-x-60column-gap: 15rem; /* 240px */
gap-y-60row-gap: 15rem; /* 240px */
gap-64gap: 16rem; /* 256px */
gap-x-64column-gap: 16rem; /* 256px */
gap-y-64row-gap: 16rem; /* 256px */
gap-72gap: 18rem; /* 288px */
gap-x-72column-gap: 18rem; /* 288px */
gap-y-72row-gap: 18rem; /* 288px */
gap-80gap: 20rem; /* 320px */
gap-x-80column-gap: 20rem; /* 320px */
gap-y-80row-gap: 20rem; /* 320px */
gap-96gap: 24rem; /* 384px */
gap-x-96column-gap: 24rem; /* 384px */
gap-y-96row-gap: 24rem; /* 384px */

基本用法

¥Basic usage

设置元素之间的间隙

¥Setting the gap between elements

使用 gap-* 工具更改网格和 Flexbox 布局中行和列之间的间隙。

¥Use the gap-* utilities to change the gap between both rows and columns in grid and flexbox layouts.

01
02
03
04
<div class="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

使用 gap-x-*gap-y-* 工具独立更改列和行之间的间隙。

¥Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows independently.

01
02
03
04
05
06
<div class="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>

有条件地应用

悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:gap-6 仅在 hover 时应用 gap-6 工具。

<div class="grid gap-4 hover:gap-6">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:gap-6 仅在中等屏幕尺寸及以上时应用 gap-6 工具。

<div class="grid gap-4 md:gap-6">
  <!-- ... -->
</div>

要了解更多信息,请查看有关 响应式设计暗黑模式、以及 其他媒体查询修饰符 的文档。


使用自定义值

¥Using custom values

自定义主题

¥Customizing your theme

默认情况下,Tailwind 的间隙比例使用 默认间距比例。你可以通过编辑 tailwind.config.js 文件中的 theme.spacingtheme.extend.spacing 来自定义间距比例。

¥By default, Tailwind’s gap scale uses the default spacing scale. You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '11': '2.75rem',
      }
    }
  }
}

或者,你可以通过编辑 tailwind.config.js 文件中的 theme.gaptheme.extend.gap 来自定义间隙比例。

¥Alternatively, you can customize just the gap scale by editing theme.gap or theme.extend.gap in your tailwind.config.js file.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gap: {
        '11': '2.75rem',
      }
    }
  }
}

主题定制 文档中了解有关自定义默认主题的更多信息。

¥Learn more about customizing the default theme in the theme customization documentation.

任意值

¥Arbitrary values

如果你需要使用一次性的 gap 值,而该值没有必要包含在你的主题中,请使用方括号动态生成属性,使用任意值。

<div class="grid gap-[2.75rem]">
  <!-- ... -->
</div>

任意值 文档中了解有关任意值支持的更多信息。