Grid

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

En esta página

Playground

12345

Espacio (gap)

Columna mínima

Piezas

Fondo

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

Pieza 1Pieza 2Pieza 3Pieza 4Pieza 5Pieza 6

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>

React

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

12345678

1234

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>

12vacío345

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.