Grid

Un constructor de diseño de cuadrícula responsivo que utiliza propiedades de CSS Grid y utilidades de Tailwind.

Grid 1

Grid 2

Grid 3

Grid 4

Grid 5

Grid 6

default.tsx

1'use client';
2
3import React from 'react';
4import { Grid } from '../../layout/grid';
5
6export function Default() {
7  return (
8    <Grid columns="3" gap="4" className="border-border bg-card w-full rounded-xl border p-4">
9      <div className="bg-primary/20 text-primary border-primary/30 flex h-24 items-center justify-center rounded-lg border font-medium">
10        Grid 1
11      </div>
12      <div className="bg-secondary/20 text-secondary-foreground border-border flex h-24 items-center justify-center rounded-lg border font-medium">
13        Grid 2
14      </div>
15      <div className="bg-muted text-muted-foreground border-border flex h-24 items-center justify-center rounded-lg border font-medium">
16        Grid 3
17      </div>
18      <div className="bg-card border-border text-card-foreground flex h-24 items-center justify-center rounded-lg border font-medium">
19        Grid 4
20      </div>
21      <div className="bg-primary/10 border-primary/20 text-primary flex h-24 items-center justify-center rounded-lg border font-medium">
22        Grid 5
23      </div>
24      <div className="bg-secondary/10 border-secondary/20 text-secondary-foreground flex h-24 items-center justify-center rounded-lg border font-medium">
25        Grid 6
26      </div>
27    </Grid>
28  );
29}

Instalación

pnpm dlx nachui add grid

Anatomía

1import { Grid } from '@/components/ui/grid';

1<Grid columns="3" gap="4">
2  <div>Columna 1</div>
3  <div>Columna 2</div>
4  <div>Columna 3</div>
5</Grid>

Referencia de API

Grid

Prop	Tipo	Por defecto	Descripción
`as`	`React.ElementType`	`'div'`	El tipo de elemento HTML para renderizar el componente
`columns`	`'1' \| '2' \| ... \| '12' \| 'none' \| 'subgrid'`	`'1'`	Número de columnas en la cuadrícula
`rows`	`'1' \| '2' \| ... \| '6' \| 'none' \| 'subgrid'`	-	Número de filas en la cuadrícula
`flow`	`'row' \| 'col' \| 'dense' \| 'row-dense' \| 'col-dense'`	-	Flujos de cuadrícula (grid-flow)
`align`	`'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'`	-	Alinea los hijos a lo largo del eje del bloque
`justify`	`'start' \| 'center' \| 'end' \| 'stretch'`	-	Justifica los hijos a lo largo del eje en línea
`gap`	`'0' \| '1' \| ... \| '32'`	-	Espaciado entre elementos en ambos ejes
`gapX`	`'0' \| '1' \| ... \| '32'`	-	Espaciado horizontal entre columnas
`gapY`	`'0' \| '1' \| ... \| '32'`	-	Espaciado vertical entre filas
`className`	`string`	-	Clases CSS personalizadas

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorStack

SiguienteContainer