Tailwind CSS home page
  1. 弹性和网格
  2. 间隙

Quick reference

Class
Properties
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 */

基础用法

设置元素之间的间隙

使用 gap-* 实用程序来更改网格和弹性框布局中行和列之间的间隙。

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>

独立更改行距和列距

使用 gap-x-* 和 gap-y-* 实用程序可以独立更改列和行之间的间隙。

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>

详细了解, 请参考 Hover, Focus, & Other States 文档.

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:gap-6 来应用 gap-6 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.

使用自定义值

定制你的主题

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

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

或者，您可以通过编辑 tailwind.config.js 文件中的 theme.gap 或 theme.extend.gap 来定制间隙比例。

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

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

任意值

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

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

进一步了解，请参考 任意值 文档.