Cuadrícula

Sin columns, una cuadrícula encaja tantas pistas de al menos min como permita el espacio, y cada una reparte lo que sobra a partes iguales. Ese es el comportamiento que quiere una lista de tarjetas, y no necesita breakpoints: cambia el tamaño de esta página y las demos de abajo se recolocan solas.

Autoajuste

Lo que hace por defecto. Las pistas miden al menos 16rem.

Rutas

Carga de datos

Recursos

Imágenes

Islas

Búsqueda

grid(
  ...['Rutas', 'Carga de datos', 'Recursos', 'Imágenes', 'Islas', 'Búsqueda'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, name))),
  ),
)

Ancho de pista

min fija cuánto puede estrecharse una pista antes de que la cuadrícula baje de columnas. Cuanto menor, más columnas.

2xl

3xl

4xl

5xl

grid({ min: '9rem' },
  ...['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Un número fijo de columnas

Pasa un número cuando el recuento no debe cambiar con la ventana. Cada pista se lleva una parte igual.

Uno

Dos

Tres

grid({ columns: 3 },
  ...['Uno', 'Dos', 'Tres'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Una plantilla a medida

Una cadena se pasa tal cual como grid-template-columns, para una división de barra lateral y contenido o cualquier otra cosa que CSS grid sepa expresar.

Barra lateral

El contenido, que se queda con el resto de la fila.

grid({ columns: '12rem 1fr', gap: 'lg' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Barra lateral'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'El contenido, que se queda con el resto de la fila.'))),
)

Hueco y alineación

Corta

Una tarjeta más alta, con dos líneas de texto, para enseñar qué le hace align a sus vecinas más bajas.

Corta

grid({ min: '10rem', gap: 'xl', align: 'center' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Corta'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Una tarjeta más alta, con dos líneas de texto, para enseñar qué le hace align a sus vecinas más bajas.'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Corta'))),
)

Props

Prop	Tipo	Por defecto	Descripción
`columns`	`number \| string`	—	Un número fijo de pistas, o un valor de grid-template-columns tal cual. Omítelo para autoajuste.
`min`	`string`	`'16rem'`	Ancho mínimo de pista en el autoajuste.
`gap`	`Space`	`'md'`	Espacio entre pistas y filas.
`align`	`string`	`'stretch'`	Cualquier valor de align-items.
`as`	`string`	`'div'`	Elemento que se renderiza.

Una pista nunca se hace más ancha que la propia cuadrícula, aunque min sea mayor que el espacio disponible: así un mínimo de 16rem no provoca una barra de desplazamiento horizontal en un móvil de 320 px.