Ant.d's Space component in CSS

component.ts

import { spaced } from '@crux/design/styles';

...

html`
  <div class=${cx(spaced.container, spaced.vertical, spaced.small)}>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>`;

spaced.module.css

.container {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--cx-spaced-gap-default, var(--cx-spacing-2));
}

.container.small {
  gap: var(--cx-spaced-gap-small, var(--cx-spacing-1));
}

.container.large {
  gap: var(--cx-spaced-gap-large, var(--cx-spacing-4));
}

.container.vertical {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}