Grid

Colunas que se ajustam à largura: cada uma tem uma largura mínima e, abaixo dela, desce. Nunca passa da tela.

Nesta página

Playground

12345

Espaço (gap)

Coluna mínima

Peças

Fundo

HTML

<div class="feitio-grid" data-gap="1" style="--feitio-grid-min: 6rem"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span><span class="lay-box">4</span><span class="lay-box">5</span></div>

Quando usar

Sempre que houver espaço entre peças: o espaço é do pai, e só um passo da régua.

Quando não usar

Para o recuo de dentro de um componente: ele já vem pronto.
Com uma margem escrita à mão junto: nunca; a checagem reprova.

Exemplos

Peça 1Peça 2Peça 3Peça 4Peça 5Peça 6

Grid

Seis peças de no mínimo 9rem, a space-3.

Mostrar código

HTML

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

React

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

12345678

1234

Outra coluna mínima

Com --feitio-grid-min: 6rem cabem mais colunas; com 15rem, menos. O número de colunas sai da largura, nunca de um número fixo.

Mostrar código

HTML

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

12vazio345

Uma célula vazia

Quando falta uma peça, as outras sobem para o lugar dela. Para guardar o lugar (um card que ainda vai chegar), ponha um espaço marcado com o tracejado, que no Feitio quer dizer "aqui é um espaço".

Mostrar código

HTML

<div class="feitio-grid" data-gap="3">
  <article>…</article>
  <article>…</article>
  <div class="slot" aria-hidden="true"></div>  <!-- o tracejado: um espaço -->
  <article>…</article>
</div>

Atributos

Atributo	Valores	Para quê
`class="feitio-grid"`	obrigatório	O layout.
`data-gap`	`1` a `7`	O espaço entre as peças. No React, nenhum outro valor compila.
`min`	uma largura	A largura mínima de cada coluna.

As regras e um formulário inteiro montado com os três estão em Layout.