# Grid

Columnas que encajan con el ancho: cada una tiene un ancho mínimo y, debajo de ella, envuelve. Nunca pasa por la pantalla.

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

## Cuándo usarlo

-   Cada vez que hay espacio entre piezas: el espacio pertenece al padre, y solo un paso de la escala.

## Cuándo no usarlo

-   **Para el relleno interno de un componente:** viene listo.
-   **Con un margen a mano al lado:** nunca; la comprobación lo falla.

## Ejemplos

### Rejilla

Seis piezas de al menos 9rem, en `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>
```

### Otra columna mínima

Con `--feitio-grid-min: 6rem` caben más columnas; con 15rem, menos. El número de columnas sale del ancho, nunca de un número fijo.

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

### Una celda vacía

Cuando falta una pieza, las otras suben a su lugar. Para guardar el lugar (una tarjeta que aún va a llegar), pon un espacio marcado con la línea discontinua, que en Feitio quiere decir "aquí hay un espacio".

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é sirve

`class="feitio-grid"`

obligatorio

El diseño.

`data-gap`

`1` a `7`

El espacio entre piezas. En React, ningún otro valor se compila.

`min`

un ancho

Ancho mínimo de cada columna.

Las reglas y un formulario completo construido con los tres están en [Layout](/es/dev/layout/).