Gap

A classe gap no Tailwind CSS define o espaçamento entre elementos filhos dentro de um container com display: grid ou display: flex (quando o flex-wrap estiver ativo). Diferente de margin e padding, que afetam o espaço dentro ou fora de um único elemento, o gap atua entre os itens irmãos.

Como usar

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-100 p-4">Item 1</div>
  <div class="bg-gray-200 p-4">Item 2</div>
  <div class="bg-gray-300 p-4">Item 3</div>
</div>

Neste exemplo, gap-4 cria um espaço de 1rem (16px) entre as colunas e linhas da grade.

Com flex e flex-wrap

Quando aplicado em containers flexíveis com quebra de linha (flex-wrap), o gap também funciona como espaçamento entre os itens.

<div class="flex flex-wrap gap-2">
  <span class="bg-blue-100 p-2">Tag 1</span>
  <span class="bg-blue-100 p-2">Tag 2</span>
  <span class="bg-blue-100 p-2">Tag 3</span>
</div>

Direções específicas

Você pode aplicar gap apenas na direção horizontal ou vertical:

  • gap-x-*: espaçamento horizontal entre colunas

  • gap-y-*: espaçamento vertical entre linhas

<div class="grid grid-cols-2 gap-x-8 gap-y-4">
  <div class="bg-indigo-100 p-4">1</div>
  <div class="bg-indigo-200 p-4">2</div>
  <div class="bg-indigo-300 p-4">3</div>
  <div class="bg-indigo-400 p-4">4</div>
</div>

Escala de valores

A escala de gap segue a mesma usada em margin e padding, como:

  • gap-0, gap-1, gap-2, ..., gap-96

  • gap-px: 1px de espaço

Responsividade com gap

Você pode usar classes responsivas para adaptar o espaçamento conforme o tamanho da tela:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 lg:gap-8">
  <!-- Conteúdo -->
</div>

O uso do gap proporciona um controle limpo e semântico do espaçamento entre elementos, reduzindo a necessidade de margens manuais e facilitando a construção de layouts bem espaçados e simétricos.

Updated on
Padding
Tipografia