BeeGrid

A grid of equal-width columns that collapses to a single column on small screens.

import { BeeGrid } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Usage

The columns prop is required. Items go in the default slot and fill the grid row by row.

One

Two

Three

Four

Five

Six

<script setup lang="ts">
import { BeeCard, BeeGrid } from "@thaisrr/beedesign";
</script>

<template>
  <BeeGrid :columns="3">
    <BeeCard>One</BeeCard>
    <BeeCard>Two</BeeCard>
    <BeeCard>Three</BeeCard>
    <BeeCard>Four</BeeCard>
    <BeeCard>Five</BeeCard>
    <BeeCard>Six</BeeCard>
  </BeeGrid>
</template>

Gap

The gap prop accepts a keyword (none, sm, md, lg) tied to the spacing tokens, or a number in pixels.

gap="none"

1234

gap="sm"

1234

gap="md"

1234

gap="lg"

1234

:gap="48"

1234

<script setup lang="ts">
import { BeeGrid, BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div v-for="value in ['none', 'sm', 'md', 'lg', 48] as const" :key="value">
      <code>{{ typeof value === "number" ? `:gap="${value}"` : `gap="${value}"` }}</code>
      <BeeGrid :columns="4" :gap="value" :responsive="false" class="frame">
        <BeeTag v-for="n in 4" :key="n" class="cell">{{ n }}</BeeTag>
      </BeeGrid>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.frame {
  margin-top: 0.4rem;
}

.cell {
  justify-content: center;
}
</style>

Spanning an item

An item can take up several columns with grid-column in your own CSS.

Spans two columns

One column

One column

Spans two columns

<script setup lang="ts">
import { BeeCard, BeeGrid } from "@thaisrr/beedesign";
</script>

<template>
  <BeeGrid :columns="3">
    <BeeCard class="wide">Spans two columns</BeeCard>
    <BeeCard>One column</BeeCard>
    <BeeCard>One column</BeeCard>
    <BeeCard class="wide">Spans two columns</BeeCard>
  </BeeGrid>
</template>

<style scoped>
.wide {
  grid-column: span 2;
}
</style>

Responsive

By default, below 1000px wide, the grid switches to a single column. Items that spanned several columns go back to a normal position. Turn this off with :responsive="false".

One column below 1000px

Resize the window

to see the difference

<script setup lang="ts">
import { BeeCard, BeeGrid } from "@thaisrr/beedesign";
</script>

<template>
  <BeeGrid :columns="3">
    <BeeCard>One column below 1000px</BeeCard>
    <BeeCard>Resize the window</BeeCard>
    <BeeCard>to see the difference</BeeCard>
  </BeeGrid>
</template>

API

Props

Name	Type	Default	Description
columns	number		Number of columns. Required.
gap	"none" | "sm" | "md" | "lg" | number	"lg"	Spacing. A number is in pixels.
responsive	boolean	true	Single column below 1000px.

Slots

Name	Description
default	Items of the grid.

CSS variables used

--bd-space-sm, --bd-space-md, --bd-space-lg.