Skip to main content

gutter

Add space between child elements.

function gutter(options: { direction: AxisDirection; space?: number; selector?: string }): SerializedStyles;
function gutter(direction: AxisDirection, space?: number, selector?: string): SerializedStyles;

Examples​

/** @jsxImportSource @emotion/react */
import { gutter } from '@toss/emotion-utils';

export default function App() {
  return (
    <div css={gutter('horizontal', 16)}>
      <button>
        Button
      </button>
      <button>
        Button
      </button>
      <button>
        Button
      </button>
    </div>
  );
}
Open on CodeSandbox
const ButtonContainer = styled.div`
  padding: 16px 24px;
  ${gutter('horizontal', 8)}
`;

<Flex.Center
  css={css`
    padding: 0px 20px;
    ${gutter({
      direction: 'horizontal',
      space: 20,
    })}
  `}
>
  <Foo />
</Flex.Center>;