Gap

Tambah ruang antara item flex/grid

Sintaks

space="g:[value]" or space="g-{axis}:[value]"

Nilai

Properti	CSS Output	Huraian
g	gap: var(--s-{value})	Semua ruang
g-x	column-gap: var(--s-{value})	Ruang lajur
g-y	row-gap: var(--s-{value})	Ruang baris

Nilai Skala

none, tiny, small, medium, big, giant, vast

Contoh

<div layout="flex" space="g:medium">Gap between items</div>
<div layout="grid" space="g-x:big g-y:small">Grid gaps</div>

Pratonton

Gap Flex

space="g:medium" - Ruang antara item flex

123

Lihat Kod

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>

Gap Grid

space="g:small" - Ruang antara item grid

123456

Lihat Kod

<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div space="gap:[custom-value]">Custom</div>

Nota

TIP

Sokongan Skala Tailwind

Gunakan awalan tw- untuk mengakses skala numerik Tailwind: g:tw-4 (1rem), g:tw-8 (2rem)

Rujukan