# Grid

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

## Playground

```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

### 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>
```

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

### 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>
```

### 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](/pt/dev/layout/).