Grid

Component

Preview

Preview solid

Usage

import { Grid } from "@/components/ui/grid"

export function GridDemo() {
return (
  <Grid columns={3} class="gap-4">
    <div class="border rounded-md p-4 text-sm">Item 1</div>
    <div class="border rounded-md p-4 text-sm">Item 2</div>
    <div class="border rounded-md p-4 text-sm">Item 3</div>
    <div class="border rounded-md p-4 text-sm">Item 4</div>
    <div class="border rounded-md p-4 text-sm">Item 5</div>
    <div class="border rounded-md p-4 text-sm">Item 6</div>
  </Grid>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/grid.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/grid.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/grid.json

Manual

components/ui/grid.tsx

import { type ComponentProps, splitProps } from "solid-js"
import { cn } from "@/lib/utils"

export interface GridProps extends ComponentProps<"div"> {
  columns?: number
  gap?: number | string
}

export function Grid(props: GridProps) {
  const [local, rest] = splitProps(props, ["class", "columns", "gap", "style", "children"])

  const columns = () => local.columns ?? 1
  const gap = () => {
    if (local.gap === undefined) return undefined
    return typeof local.gap === "number" ? `${local.gap * 0.25}rem` : local.gap
  }

  const customStyle = () => {
    const style: Record<string, string> = {
      "grid-template-columns": `repeat(${columns()}, minmax(0, 1fr))`,
    }
    const gapValue = gap()
    if (gapValue) {
      style.gap = gapValue
    }
    return style
  }

  return (
    <div class={cn("grid", local.class)} style={customStyle()} {...rest}>
      {local.children}
    </div>
  )
}