Tailwind CSS Gap

2022-08-08 10:06 更新

Gap

用于控制網(wǎng)格和彈性框項目之間的間距的實用程序。

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

使用方法

使用 ?gap-{size}? 來改變網(wǎng)格和 flexbox 布局中行和列之間的間距。


<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>

響應(yīng)式

要在特定的斷點處控制間隙,請在任何現(xiàn)有的間隔功能類前添加 ?{screen}:? 前綴。例如,使用 ?md:gap-6? 來僅在中等尺寸及以上的屏幕應(yīng)用 ?gap-6? 功能。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計功能的更多信息,請查看響應(yīng)式設(shè)計文檔。

自定義

默認情況下,Tailwind 的間距比例與您配置的間距比例相匹配。

您可以在您的 ?tailwind.config.js? 文件中的 ?theme.spacing? 或 ?theme.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',
        }
      }
    }
  }

在 主題自定義文檔 中了解更多關(guān)于自定義默認主題的信息。

變體

默認情況下, 針對 gap 功能類,只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?gap ?屬性來控制為 gap 功能生成哪些變體。

例如,這個配置也將生成 hover and focus 變體:

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

禁用

如果您不打算在您的項目中使用 gap 功能,您可以通過在配置文件的 ?corePlugins ?部分將 ?gap ?屬性設(shè)置為 ?false ?來完全禁用它們:

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


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號