svelte-kit-vice/src/uix/eidos/components/auto-grid

Eidos AutoGrid

Responsive grid container that fits as many columns as its inline size allows — no media queries required. Wraps <Grid> (which wraps <Box>) and computes grid-template-columns: repeat(auto-fill, minmax(MIN, 1fr)) in JS based on the minChildWidth prop. Falls back to a fixed repeat(N, minmax(0, 1fr)) when columns is passed instead.

Superficie

<!-- Fluid: as many columns as fit, each at least 240px wide. -->
<AutoGrid minChildWidth={240} gap={3}>
  <Card />
  <Card />
  <Card />
</AutoGrid>

<!-- Fixed: always 3 columns, regardless of viewport. -->
<AutoGrid columns={3} gap={3}>
  …
</AutoGrid>

<!-- Responsive minChildWidth: smaller cards on tiny screens. -->
<AutoGrid minChildWidth={{ base: 160, md: 240 }} gap={3}>
  …
</AutoGrid>

Baseline

Origen: air/components/layout/auto-grid (rama morfo-runtime).

Adaptaciones aplicadas durante el port:

• Resolución reactiva (ActiveEidos.require().resolve()) en lugar de getAir().dom.resolve().
• Marker propio [data-auto-grid] además del data-grid heredado de <Grid>, para que consumidores puedan estilar el primitive específico cuando lo necesiten.
• Cambio de auto-fit a auto-fill en el template — auto-fill preserva las pistas vacías cuando hay menos hijos que columnas disponibles, lo que da un grid más predecible y consistente con la expectativa del consumidor (Chakra SimpleGrid, Mantine SimpleGrid). Si se quiere auto-fit (stretch a las pistas pobladas), el consumidor puede usar <Grid templateColumns="repeat(auto-fit, minmax(240px, 1fr))"> directamente.
• Drop del prefijo air- y eliminación de la dependencia de getAir().

Comparativa

Capacidad	UIX (eidos)	Radix Themes	Chakra UI SimpleGrid	Mantine SimpleGrid
Fluid fit (minChildWidth)	Sí (minChildWidth={240})	No (sólo via raw templateColumns)	Sí (minChildWidth)	Sí (minChildWidth)
Fixed columns (columns)	Sí (columns={3})	Sí (columns="3") en Grid	Sí (columns={3})	Sí (cols={3})
Responsive columns	Sí (ResponsiveProp<number>)	Sí ({ initial: 1, sm: 2 })	Sí ({ base: 1, md: 3 })	Sí ({ base: 1, sm: 2 })
Responsive minChildWidth	Sí (ResponsiveProp<…>)	n/a	Sí	Sí
gap shorthand	Sí (vía Grid → Box)	Sí	Sí	Sí (spacing)
Per-axis gap (rowGap, columnGap)	Sí (vía Grid)	Sí	Sí	Sí (verticalSpacing, horizontalSpacing)
auto-fill vs auto-fit	auto-fill (preserva tracks vacíos)	n/a	auto-fit	auto-fit
Composes through <Box>	Sí	n/a	n/a	n/a

Decisiones

• minChildWidth gana sobre columns — cuando se pasan ambos, el template fluido es la primitiva específica de AutoGrid; columns queda como modo "shortcut" para grids fijos sin necesidad de saltar a <Grid>.
• auto-fill por defecto — divergencia de Chakra/Mantine, que usan auto-fit. Razón: auto-fill deja tracks reservados cuando hay menos hijos que columnas, lo que evita que el primer hijo se estire hasta ocupar todo el inline-size cuando hay sólo uno. Si el consumidor necesita el comportamiento de auto-fit, usa <Grid templateColumns> directamente.
• Composición sobre <Grid> — el primitive es prácticamente puro templateColumns computado; no duplica la lógica del recipe de Grid. Cualquier mejora futura del recipe Grid (alignContent, place-items, …) llega "gratis".
• minChildWidth resuelve con formatLayoutLength — números van a px, strings pasan tal cual ("15rem", "min(20rem, 50%)").
• No exponemos templateColumns — entra en colisión con el propio cálculo del primitive. Si se necesita un template custom, se usa <Grid> directamente.

Eventos Sema

AutoGrid declara 0 eventos. Es una primitiva pasiva: ajusta el template de columnas según la geometría del contenedor — sin commit, sin emerge, sin keyboard. Componentes que animan items al entrar/salir del grid componen AutoGrid con un primitive interactivo (popover, drawer) que sí posee los verbos sema relevantes. Misma justificación que Box, Flex, Grid y AspectRatio.

Gaps

Gap	Disposición	Detalle
auto-fit mode prop	diferir	Hoy se usa <Grid templateColumns> directamente cuando se quiere el comportamiento de auto-fit. Subir a prop si llegan ≥2 casos reales.
breakpoints config (Mantine-style array de fallbacks)	descartar	Lo cubre ResponsiveProp sobre columns y minChildWidth. Duplicaría la API.
spacing alias para gap (Mantine ergonomics)	descartar	Mantenemos gap consistente con Box/Flex/Grid. Aliases sólo añaden ruido.
Slot para divider entre filas	diferir	Stack tiene divider pending; vendría después de Stack.
equalChildHeight toggle	diferir	Posible utility si surge una necesidad real — hoy se logra con align="stretch" heredado de Grid.

Referencias

• Chakra UI SimpleGrid: https://chakra-ui.com/docs/components/simple-grid
• Mantine SimpleGrid: https://mantine.dev/core/simple-grid/
• CSS grid-template-columns: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
• Smolnar / Heydon "Every Layout" Grid: https://every-layout.dev/layouts/grid/

Passive justification

Visual-only primitive (scope: ['eidos'] en el morfo). Una sola part Provider que emite el marker [data-auto-grid] sobre el shell [data-box][data-grid]. Sin estados, sin data-attrs específicos, sin ARIA, sin keyboard. Toda la lógica se reduce a computar grid-template-columns y delegar a <Grid>. No hay nada que animar ni ciclo de vida que enviar a sema.