Layout

Stack, Inline and Grid: the space between pieces comes from the parent and can only be a step of the scale.

On this page

Why

Spacing written by hand in every place ends up off the scale: an extra margin here, a zeroed one there. In Feitio, the space between pieces always belongs to the parent, and can only be a step of the scale. Three components take care of it, and nobody writes margin, gap or padding again.

The three

Piece 1Piece 2Piece 3

Stack

Stacks pieces, one below the other, with the same space between all of them.

Show code

HTML

<div class="feitio-stack" data-gap="3">
  …
</div>

React

<Stack gap={3}>
  …
</Stack>

Piece 1Piece 2Piece 3Piece 4

Inline

Puts pieces side by side and wraps the line when they do not fit.

Show code

HTML

<div class="feitio-inline" data-gap="2">
  …
</div>

React

<Inline gap={2}>
  …
</Inline>

Piece 1Piece 2Piece 3Piece 4Piece 5Piece 6

Grid

Columns that fit the width: each has a minimum width and, below it, wraps to the next row. It never goes past the screen.

Show code

HTML

<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
  …
</div>

React

<Grid gap={3} min="9rem">
  …
</Grid>

Together

A whole form without a single margin: the outer Stack separates fields with space-5, the inner one joins label, hint and field with space-1, and Inline lines up the buttons.

React

<Stack gap={5}>
  <Stack gap={1}>
    <Label htmlFor="nome">Nome do lembrete</Label>
    <Hint id="nome-dica">Aparece na notificação</Hint>
    <TextInput id="nome" aria-describedby="nome-dica" />
  </Stack>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Salvar lembrete</Button>
    <Button>Cancelar</Button>
  </Inline>
</Stack>

Attributes

Attribute	Values	What for
`gap`	`1` a `7` (default: 4)	The space between pieces, one step of the scale. No other value is accepted.
`align`	`"start"`, `"center"`	In Stack: how pieces align horizontally.
`justify`	`"between"`, `"end"`	In Inline: how pieces spread along the line.
`min`	a width, like `"15rem"`	In Grid: each column’s minimum width. Below it, the column wraps.

In React, gap has the type 1 | 2 | 3 | 4 | 5 | 6 | 7: a value off the scale does not even compile.

Rules

Space belongs to the parent. A component has no outer margin; the Stack, Inline or Grid around it decides the distance to its neighbor.
No empty spacer between two elements. Space lives in the parent’s gap.
Inner padding belongs to the component: a button’s or block’s padding comes ready and is not changed by hand.
An automatic check fails margin, gap or padding written by hand in the code of whoever uses Feitio.

All three work on this page in plain CSS, and also come as Astro and React components (@feitio/astro, @feitio/react).