Todos los componentes (204)

Rejilla

Maquetación · Grid · .amset-grid

Qué es y cuándo usarlo

Una rejilla que cede sola: como mucho columns columnas (de 1 a 6; por defecto, 2) y ninguna más estrecha que min. Si no caben, las que sobran bajan de fila, sin una sola consulta de medios.

Cuándo usarlo

Tarjetas de un panel, productos de un catálogo, los bloques de un resumen: piezas del mismo tipo que se reparten el ancho.
min es lo más estrecha que puede quedar una columna antes de partir (una longitud CSS: 14rem, 220px; por defecto, 12rem). gap va de none a xl y sale de la escala de espacio.
equalHeight (por defecto, sí) estira la única pieza de cada celda al alto de su fila: tres tarjetas en fila miden lo mismo aunque cada una vaya dentro de su propio envoltorio. Una imagen, un vídeo, un svg, un canvas o un iframe no se estiran, porque se deformarían. Con false, cada celda mide lo que su contenido.
as pinta el elemento que toque (section, article, nav…) en vez del div.

Cuándo no

Una sola fila o una sola columna con separación: Stack.
Datos en filas y columnas que se comparan entre sí: Table. Pares de nombre y valor: DataList.
Cientos o miles de elementos: VirtualList, porque la rejilla los pinta todos.

Teclado: no participa: solo coloca. El orden de tabulación es el del código, también cuando las columnas bajan de fila.

Accesibilidad: la rejilla cede por el ancho del CONTENEDOR, no de la ventana: la misma rejilla dentro de un panel lateral estrecho parte igual de bien que en un móvil, y a 320 px de ancho queda en una columna sin salirse por la derecha. No reordena nada, así que el lector y el tabulador recorren lo mismo que se ve. No añade ningún papel: si las piezas son una lista, la lista la pone quien las pinta.

Aspecto fino: --amset-grid-cols (cuántas columnas como mucho; lo fija columns), --amset-grid-min (12rem; min lo escribe en línea) y --amset-grid-gap (lo fija gap).

Cómo se ve

UnoDosTres

<Grid columns={3} gap="md">
  <Tarjeta /> <Tarjeta /> <Tarjeta />
</Grid>

Props

Se importa con import { Grid } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`as`	`"article" \| "aside" \| "div" \| "footer" \| "header" \| "main" \| "nav" \| "section" \| "span"`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`columns`	`3 \| 4 \| 2 \| 5 \| 1 \| 6`	Cuantas columnas COMO MUCHO. Si no caben, se ponen unas debajo de otras.
`equalHeight`	`boolean`	Que lo de cada celda llene el alto de su fila. Por defecto si: tres tarjetas en fila miden lo mismo aunque cada una vaya dentro de un envoltorio propio (un elemento de lista, un enlace). Con `false`, cada celda mide lo que su contenido.
`gap`	`"sm" \| "md" \| "lg" \| "none" \| "xs" \| "xl"`	—
`min`	`string`	Lo mas estrecha que puede quedar una columna antes de que la rejilla parta en menos. Una longitud CSS: `16rem`, `220px`.
`style`	`CSSProperties`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-grid-cols`	`2`
`--amset-grid-min`	`12rem`
`--amset-grid-gap`	`var(--amset-space-4)`

Cómo se cambia

.amset-grid {
  --amset-grid-cols: ...;
  --amset-grid-min: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: