Grid

Vista previa

Grid es un primitivo de diseño CSS Grid que admite columnas responsivas y separación. Root es un contenedor CSS grid e Item es una celda de la cuadrícula.

#Uso

Compón Root e Item. Root establece el contenedor grid y cada Item es una celda.

import * as Grid from "@solidiom/grid"

;<Grid.Root>
  <Grid.Item>Uno</Grid.Item>
  <Grid.Item>Dos</Grid.Item>
  <Grid.Item>Tres</Grid.Item>
</Grid.Root>

#Instalación

Instala el paquete con pnpm add @solidiom/grid. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.

#Partes

grid expone 2 partes:

• Root — el contenedor CSS grid.
• Item — una celda dentro del contenedor.

#Estilos

grid incluye data-scope="grid" y atributos data-part en cada parte para seleccionar estilos CSS o recetas.

#Teclado y comportamiento

Este primitivo no tiene interacción de teclado propia.

#Composición

Coloca cualquier primitivo dentro de las celdas Item para organizarlo en una cuadrícula responsiva.

#SSR e hidratación

Grid renderiza HTML estático y no requiere hidratación.

solidiom add grid