Componentes

Primer bloque

Contenido destacado principal

Segundo bloque

Información complementaria

Tercer bloque

Sección de detalle

Cuarto bloque

Estadísticas o métricas

Quinto bloque

Galería o showcase

Sexto bloque

Testimonios o quotes

Séptimo bloque

Features o beneficios

Octavo bloque

Integraciones o partners

Noveno bloque

CTA o contacto final

Layout
Items 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Configuración JSON
{
  "items": [
    {
      "imageUrl": "https://picsum.photos/seed/bg9-1/600/400",
      "title": "Primer bloque",
      "text": "Contenido destacado principal"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bg9-2/600/400",
      "title": "Segundo bloque",
      "text": "Información complementaria"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bg9-3/600/400",
      "title": "Tercer bloque",
      "text": "Sección de detalle"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bg9-4/600/400",
      "title": "Cuarto bloque",
      "text": "Estadísticas o métricas"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bg9-5/600/400",
      "title": "Quinto bloque",
      "text": "Galería o showcase"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bg9-6/600/400",
      "title": "Sexto bloque",
      "text": "Testimonios o quotes"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bg9-7/600/400",
      "title": "Séptimo bloque",
      "text": "Features o beneficios"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bg9-8/600/400",
      "title": "Octavo bloque",
      "text": "Integraciones o partners"
    },
    {
      "imageUrl": "https://picsum.photos/seed/bg9-9/600/400",
      "title": "Noveno bloque",
      "text": "CTA o contacto final"
    }
  ]
}

Bento Grid x9

BentoGridx9.vue

Grid bento de 9 celdas con 10 variantes de layout basadas en filas (row-based). Cada variante define cuántas celdas hay por fila, con soporte para celdas wide en filas de 1 celda. Incluye animación de entrada escalonada, responsive adaptativo y compatibilidad con BentoCard.

bentogridlayoutresponsive9 celdas

Props

PropTipoDefaultDescripción
variantVariantName'3y3y3'Variante de layout. Define cuántas celdas hay en cada fila.
itemsBentoGridItem[]9 items vacíosArray de hasta 9 items con imageUrl, title, text, ctaText, ctaHref y colores.
gapstring'0.75rem'Espacio entre celdas (valor CSS).
borderRadiusstring'0.75rem'Border radius de cada celda.
rowMinHeightstring'14rem'Altura mínima de cada fila en desktop.
animateEntrybooleantrueActiva la animación fade-in escalonada al entrar en el viewport.

Variantes disponibles

// Todas las variantes son row-based (distribución por filas)
'3y3y3'   // 3 filas de 3 celdas
'2y3y4'   // Piramidal: 2, 3, 4 celdas
'4y3y2'   // Piramidal inversa: 4, 3, 2 celdas
'1y4y4'   // 1 celda wide arriba + 4 + 4
'4y4y1'   // 4 + 4 + 1 celda wide abajo
'4y1y4'   // 4 + 1 celda wide centro + 4
'3y2y2y2' // 4 filas: 3, 2, 2, 2
'2y2y2y3' // 4 filas: 2, 2, 2, 3
'1y2y3y3' // 4 filas: 1 wide, 2, 3, 3
'3y3y2y1' // 4 filas: 3, 3, 2, 1 wide

Interfaz BentoGridItem

interface BentoGridItem {
  imageUrl?: string      // URL de la imagen de fondo
  title?: string         // Título superpuesto
  text?: string          // Texto descriptivo
  ctaText?: string       // Texto del botón CTA
  ctaHref?: string       // URL del CTA
  ctaTarget?: '_self' | '_blank'
  titleColor?: string    // Color del título
  textColor?: string     // Color del texto
  ctaColor?: string      // Color del CTA
  _id?: string | number  // Clave interna para :key
}

Notas

  • El layout usa flex-direction: column con filas internas de flex-direction: row. Cada fila distribuye sus celdas equitativamente.
  • 10 variantes disponibles que combinan 3 y 4 filas con distintas distribuciones (3-3-3, 2-3-4, 1-4-4, etc.).
  • Las variantes con 1 celda en una fila aplican shape "wide" a esa celda; el resto usa "normal".
  • Responsive: en tablet (64rem) se muestra grid de 2 columnas; en móvil (48rem) se apila en 1 columna.
  • La animación usa IntersectionObserver con stagger escalonado de 0.06s por celda.
  • Cada item soporta las mismas props que BentoCard: imageUrl, title, text, ctaText, ctaHref, colores, etc.

Ejemplo de uso

<BentoGridx9
  variant="2y3y4"
  :items="[
    { imageUrl: '/img/hero.jpg', title: 'Hero' },
    { imageUrl: '/img/feat1.jpg', title: 'Feature 1', text: 'Descripción' },
    { imageUrl: '/img/feat2.jpg', title: 'Feature 2' },
    { imageUrl: '/img/stat1.jpg', title: 'Estadística' },
    { imageUrl: '/img/stat2.jpg', title: 'Métrica' },
    { imageUrl: '/img/gallery1.jpg', title: 'Galería 1' },
    { imageUrl: '/img/gallery2.jpg', title: 'Galería 2' },
    { imageUrl: '/img/gallery3.jpg', title: 'Galería 3' },
    { imageUrl: '/img/cta.jpg', title: 'CTA', ctaText: 'Contactar', ctaHref: '/contacto' },
  ]"
  gap="0.75rem"
  border-radius="0.75rem"
  row-min-height="14rem"
  :animate-entry="true"
/>