ItemGrid1

A flexible and responsive grid layout component designed for displaying up to 5 items in a dynamic grid pattern. The component automatically adjusts its layout based on the number of columns specified and the available space.

https://

Badge

Card 6.1

Card 6.2

Card 6.3

Card 6.4

Card 6.5

---
import { ItemGrid1, Card6 } from '@yatoday/astro-ui/astro';
---

<ItemGrid1 class="p-6">
  <Card6
    title='Card 6.1'
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 6.1' }}
    callToAction={{ href: '#' }}
    badge="Badge"
    classes={{ aspect: 'pb-[116%]' }}
  />
  <Card6
    title='Card 6.2'
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 6.1' }}
    callToAction={{ href: '#' }}
    classes={{ aspect: 'pb-[100%]' }}
  />
  <Card6
    title='Card 6.3'
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 6.1' }}
    callToAction={{ href: '#' }}
    classes={{ aspect: 'pb-[133%]' }}
  />
  <Card6
    title='Card 6.4'
    image={{ src: '~/assets/images/800x800.svg', alt: 'Card 6.1' }}
    callToAction={{ href: '#' }}
    classes={{ aspect: 'pb-[133%]' }}
  />
  <Card6
    title="Card 6.5"
    callToAction={{ href: '/' }}
    classes={{ container: 'bg-fuchsia-200 dark:bg-fuchsia-800' }}
  />
</ItemGrid1>

---
import { ItemGrid1, Card6 } from '@yatoday/astro-ui/astro';
---

<ItemGrid1 class="p-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</ItemGrid1>

Props