Componentes

Primer bloque

Contenido destacado principal

Ver más

Segundo bloque

Información complementaria

Tercer bloque

Detalles adicionales

Cuarto bloque

Contenido extra del grid

Quinto bloque

Último elemento del layout

Layout
Items 5
Item 1
Item 2
Item 3
Item 4
Item 5
Configuración JSON
{
  "items": [
    {
      "imageUrl": "https://picsum.photos/seed/b5-1/600/400",
      "title": "Primer bloque",
      "text": "Contenido destacado principal",
      "ctaText": "Ver más",
      "ctaHref": "#"
    },
    {
      "imageUrl": "https://picsum.photos/seed/b5-2/600/400",
      "title": "Segundo bloque",
      "text": "Información complementaria"
    },
    {
      "imageUrl": "https://picsum.photos/seed/b5-3/600/400",
      "title": "Tercer bloque",
      "text": "Detalles adicionales"
    },
    {
      "imageUrl": "https://picsum.photos/seed/b5-4/600/400",
      "title": "Cuarto bloque",
      "text": "Contenido extra del grid"
    },
    {
      "imageUrl": "https://picsum.photos/seed/b5-5/600/400",
      "title": "Quinto bloque",
      "text": "Último elemento del layout"
    }
  ]
}

Bento Grid x5

BentoGridx5.vue

Grid bento de 5 celdas con 9 variantes de layout: 2 basadas en grid-template-areas (D, E) con celdas que abarcan filas, y 7 basadas en filas flex (2y3, 3y2, 1y4, 4y1, 1y2y2, 2y2y1, 1y3y1). Cada celda usa BentoCard con estilos overlay, split o side. Responsive automático con colapso a 2 y 1 columna.

bentogridlayoutresponsivetarjetas

Props

PropTipoDefaultDescripción
itemsBentoItem[][]Array de hasta 5 items con imageUrl, title, text, ctaText, ctaHref y colores opcionales.
variantVariantName'D'Variante de layout. Areas: D, E. Filas: 2y3, 3y2, 1y4, 4y1, 1y2y2, 2y2y1, 1y3y1.
gapstring'0.75rem'Espacio entre celdas (valor CSS).
cardStyle'overlay' | 'split' | 'side''overlay'Estilo visual de cada tarjeta.
borderRadiusstring'0.75rem'Border radius de cada celda.

Interfaz BentoItem

interface BentoItem {
  imageUrl?: string        // URL de la imagen de fondo
  title?: string           // Título de la tarjeta
  text?: string            // Texto descriptivo
  ctaText?: string         // Texto del call-to-action
  ctaHref?: string         // URL del CTA
  ctaTarget?: '_self' | '_blank'
  titleColor?: string      // Color del título
  textColor?: string       // Color del texto
  ctaColor?: string        // Color del CTA
}

Variantes de layout

// Area-based (grid-template-areas con celdas spanning)
D:     [a b c]   // a = tall (2 filas)
       [a d e]

E:     [a b e]   // e = tall (2 filas)
       [c d e]

// Row-based (filas flex con grid interno)
2y3:   [a b]     [c d e]
3y2:   [a b c]   [d e]
1y4:   [a]       [b c d e]
4y1:   [a b c d] [e]
1y2y2: [a]       [b c]     [d e]
2y2y1: [a b]     [c d]     [e]
1y3y1: [a]       [b c d]   [e]

Notas

  • El componente tiene 9 variantes de layout organizadas en dos tipos: area-based (D, E) y row-based (2y3, 3y2, 1y4, 4y1, 1y2y2, 2y2y1, 1y3y1).
  • Las variantes area-based usan CSS grid-template-areas para celdas que abarcan varias filas/columnas.
  • Las variantes row-based usan flex column con filas internas de grid, distribuyendo las 5 celdas en las filas indicadas por el nombre.
  • Cada celda recibe una shape (normal, wide, tall) según la variante, que afecta al estilo de BentoCard.
  • Responsive: en tablet (<=64rem) se colapsa a 2 columnas, en móvil (<=48rem) a 1 columna.
  • Animación de entrada escalonada con IntersectionObserver y requestAnimationFrame para evitar flash en SSR.
  • Si se pasan menos de 5 items, se rellenan con objetos vacíos. Si se pasan más, se recortan.

Ejemplo de uso

<BentoGridx5
  :items="[
    { imageUrl: '/img/hero.jpg', title: 'Principal', text: 'Celda destacada' },
    { imageUrl: '/img/feat1.jpg', title: 'Feature 1' },
    { imageUrl: '/img/feat2.jpg', title: 'Feature 2' },
    { imageUrl: '/img/feat3.jpg', title: 'Feature 3' },
    { imageUrl: '/img/feat4.jpg', title: 'Feature 4' },
  ]"
  variant="2y3"
  gap="1rem"
  card-style="overlay"
  border-radius="0.75rem"
/>