SenangStart CSS

English

Bahasa Melayu

English

Bahasa Melayu

Appearance

Gap ​

Add gap between flex/grid items

Syntax ​

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

Values ​

PropertyCSS OutputDescription
ggap: var(--s-{value})All gaps
g-xcolumn-gap: var(--s-{value})Column gap
g-yrow-gap: var(--s-{value})Row gap

Scale Values ​

none, thin, regular, thick, tiny, tiny-2x, small, small-2x, small-3x, small-4x, medium, medium-2x, medium-3x, medium-4x, large, large-2x, large-3x, large-4x, big, big-2x, big-3x, big-4x, giant, giant-2x, giant-3x, giant-4x, vast, vast-2x, vast-3x, vast-4x, vast-5x, vast-6x, vast-7x, vast-8x, vast-9x, vast-10x

Examples ​

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

Preview ​

Flex Gap ​

space="g:medium" - Space between flex items

123
View Code
html
<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>

Grid Gap ​

space="g:small" - Space between grid items

123456
View Code
html
<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>

Arbitrary Values ​

Supports custom values using bracket syntax:

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

Notes ​

TIP

Tailwind Scale Support

Use tw- prefix to access Tailwind numeric scale: g:tw-4 (1rem), g:tw-8 (2rem)

Reference