Tailwind CSS on GitHub

Gap

用于控制网格行和列之间的间隔的功能类。

Default class reference

Class
Properties
gap-0gap: 0px;
gap-x-0column-gap: 0px;
gap-y-0row-gap: 0px;
gap-0.5gap: 0.125rem;
gap-x-0.5column-gap: 0.125rem;
gap-y-0.5row-gap: 0.125rem;
gap-1gap: 0.25rem;
gap-x-1column-gap: 0.25rem;
gap-y-1row-gap: 0.25rem;
gap-1.5gap: 0.375rem;
gap-x-1.5column-gap: 0.375rem;
gap-y-1.5row-gap: 0.375rem;
gap-2gap: 0.5rem;
gap-x-2column-gap: 0.5rem;
gap-y-2row-gap: 0.5rem;
gap-2.5gap: 0.625rem;
gap-x-2.5column-gap: 0.625rem;
gap-y-2.5row-gap: 0.625rem;
gap-3gap: 0.75rem;
gap-x-3column-gap: 0.75rem;
gap-y-3row-gap: 0.75rem;
gap-3.5gap: 0.875rem;
gap-x-3.5column-gap: 0.875rem;
gap-y-3.5row-gap: 0.875rem;
gap-4gap: 1rem;
gap-x-4column-gap: 1rem;
gap-y-4row-gap: 1rem;
gap-5gap: 1.25rem;
gap-x-5column-gap: 1.25rem;
gap-y-5row-gap: 1.25rem;
gap-6gap: 1.5rem;
gap-x-6column-gap: 1.5rem;
gap-y-6row-gap: 1.5rem;
gap-7gap: 1.75rem;
gap-x-7column-gap: 1.75rem;
gap-y-7row-gap: 1.75rem;
gap-8gap: 2rem;
gap-x-8column-gap: 2rem;
gap-y-8row-gap: 2rem;
gap-9gap: 2.25rem;
gap-x-9column-gap: 2.25rem;
gap-y-9row-gap: 2.25rem;
gap-10gap: 2.5rem;
gap-x-10column-gap: 2.5rem;
gap-y-10row-gap: 2.5rem;
gap-11gap: 2.75rem;
gap-x-11column-gap: 2.75rem;
gap-y-11row-gap: 2.75rem;
gap-12gap: 3rem;
gap-x-12column-gap: 3rem;
gap-y-12row-gap: 3rem;
gap-14gap: 3.5rem;
gap-x-14column-gap: 3.5rem;
gap-y-14row-gap: 3.5rem;
gap-16gap: 4rem;
gap-x-16column-gap: 4rem;
gap-y-16row-gap: 4rem;
gap-20gap: 5rem;
gap-x-20column-gap: 5rem;
gap-y-20row-gap: 5rem;
gap-24gap: 6rem;
gap-x-24column-gap: 6rem;
gap-y-24row-gap: 6rem;
gap-28gap: 7rem;
gap-x-28column-gap: 7rem;
gap-y-28row-gap: 7rem;
gap-32gap: 8rem;
gap-x-32column-gap: 8rem;
gap-y-32row-gap: 8rem;
gap-36gap: 9rem;
gap-x-36column-gap: 9rem;
gap-y-36row-gap: 9rem;
gap-40gap: 10rem;
gap-x-40column-gap: 10rem;
gap-y-40row-gap: 10rem;
gap-44gap: 11rem;
gap-x-44column-gap: 11rem;
gap-y-44row-gap: 11rem;
gap-48gap: 12rem;
gap-x-48column-gap: 12rem;
gap-y-48row-gap: 12rem;
gap-52gap: 13rem;
gap-x-52column-gap: 13rem;
gap-y-52row-gap: 13rem;
gap-56gap: 14rem;
gap-x-56column-gap: 14rem;
gap-y-56row-gap: 14rem;
gap-60gap: 15rem;
gap-x-60column-gap: 15rem;
gap-y-60row-gap: 15rem;
gap-64gap: 16rem;
gap-x-64column-gap: 16rem;
gap-y-64row-gap: 16rem;
gap-72gap: 18rem;
gap-x-72column-gap: 18rem;
gap-y-72row-gap: 18rem;
gap-80gap: 20rem;
gap-x-80column-gap: 20rem;
gap-y-80row-gap: 20rem;
gap-96gap: 24rem;
gap-x-96column-gap: 24rem;
gap-y-96row-gap: 24rem;
gap-pxgap: 1px;
gap-x-pxcolumn-gap: 1px;
gap-y-pxrow-gap: 1px;

使用方法

使用 gap-{size} 来改变网格布局中行和列之间的间隔。

<div class="grid gap-4 grid-cols-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

独立地改变行和列的间隙

使用 gap-x-{size}gap-y-{size} 分别改变行和列之间的间隙。

<div class="grid gap-x-8 gap-y-4 grid-cols-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

响应式

要在特定的断点处控制间隙,请在任何现有的间隔功能类前添加 {screen}: 前缀。例如,使用 md:gap-6 来仅在中等尺寸及以上的屏幕应用 gap-6 功能。

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

关于 Tailwind 的响应式设计功能的更多信息,请查看响应式设计文档。


定制

默认情况下,Tailwind 的间隙比例与您配置的 间距比例 相匹配。

您可以在您的 tailwind.config.js 文件中的 theme.spacingtheme.extend.spacing 部分自定义全局间距比例。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        spacing: {
+         '72': '18rem',
+         '84': '21rem',
+         '96': '24rem',
        }
      }
    }
  }

要单独定制间隙比例,请使用 Tailwind 主题配置的 gap 部分。

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

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

变体

默认情况下, 针对 gap 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 gap 属性来控制为 gap 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       gap: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 gap 功能,您可以通过在配置文件的 corePlugins 部分将 gap 属性设置为 false 来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gap: false,
    }
  }