Canvas Grid

Landscape View

Portrait Shot

Square Frame

Sunset View

Urban Scene

Night City

Statistics Overview

Analytics Chart

Notifications

Featured Project

Award-winning design showcase

Project Alpha

Project Beta

Project Gamma

Interactive Experience

Neon Dreams

Digital Art Collection 2024

Geometric Harmony

Abstract Series

Solar Flare

Light Study

Digital Wave

Digital Series

Featured Story

The Future of Digital Design

Exploring the intersection of AI, creativity, and human-centered design in the modern age.

Sarah Anderson

Design Director

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

Studio Metrics

150+

Projects

80+

Clients

Awards

Team Size

Project Timeline

Discovery100%

Design80%

Development60%

Testing30%

"Their creative approach and attention to detail exceeded our expectations. Truly outstanding work!"

Alex Chen

CEO, TechVision Inc.

Installation

Copy and paste the following code into your project

components/ui/canvas-grid.tsx

"use client";
 
import React from "react";
import { cn } from "@/lib/utils";
import { motion } from "framer-motion";
 
interface CanvasGridItem {
  id: string;
  content: React.ReactNode;
  width?: number;
  height?: number;
}
 
interface CanvasGridProps {
  items: CanvasGridItem[];
  className?: string;
  columns?: number;
  gap?: number;
}
 
export function CanvasGrid({
  items,
  className,
  columns = 3,
  gap = 20,
}: CanvasGridProps) {
  return (
    <div
      className={cn("grid auto-rows-[minmax(180px,auto)] gap-4", className)}
      style={{
        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
        gap: `${gap}px`,
      }}
    >
      {items.map((item) => (
        <motion.div
          key={item.id}
          className="group relative overflow-hidden rounded-lg bg-white p-2 shadow-md transition-shadow hover:shadow-lg dark:bg-zinc-900"
          style={{
            gridColumn: `span ${Math.min(item.width || 1, columns)}`,
            gridRow: `span ${item.height || 1}`,
          }}
          whileHover={{
            scale: 1.02,
            rotate: [-1, 1, 0],
            transition: { duration: 0.3 },
          }}
        >
          <div className="absolute inset-0 bg-linear-to-b from-black/5 to-transparent opacity-0 transition-opacity group-hover:opacity-100 dark:from-white/5" />
          <div className="relative h-full">{item.content}</div>
          <div className="absolute inset-x-0 bottom-0 h-8 bg-linear-to-t from-black/10 to-transparent opacity-0 transition-opacity group-hover:opacity-100 dark:from-white/10" />
        </motion.div>
      ))}
    </div>
  );
}

Update the import paths to match your project setup

import { CanvasGrid } from "@/components/ui/canvas-grid";

Usage

import { CanvasGrid } from "@/components/ui/canvas-grid";
 
export default function GalleryExample() {
  const items = [
    {
      id: "1",
      content: (
        <Card className="h-full overflow-hidden">
          <div className="h-full bg-linear-to-br from-blue-400 to-indigo-500 p-4">
            <h3 className="text-lg font-semibold text-white">Landscape View</h3>
          </div>
        </Card>
      ),
      width: 2,
      height: 1,
    },
    // ... more items
  ];
 
  return <CanvasGrid items={items} columns={4} gap={12} />;
}

Examples

Photo Gallery Grid

A classic photo gallery layout with varying image sizes and beautiful gradients.

<CanvasGrid
  items={[
    { width: 2, height: 1, id: "landscape" }, // Landscape image
    { width: 1, height: 2, id: "portrait" }, // Portrait image
    { width: 1, height: 1, id: "square" }, // Square image
  ]}
  columns={4}
  gap={12}
/>

Dashboard Layout

A modern dashboard with statistics, charts, and notification widgets.

<CanvasGrid
  items={[
    { width: 2, height: 1, id: "stats" }, // Statistics overview
    { width: 2, height: 2, id: "chart" }, // Analytics chart
    { width: 2, height: 1, id: "notifications" }, // Notifications panel
  ]}
  columns={4}
  gap={12}
/>

Interactive Art Gallery

An immersive art gallery with animations and hover effects.

<CanvasGrid
  items={[
    { width: 2, height: 2, id: "featured" }, // Featured artwork
    { width: 1, height: 1, id: "piece1" }, // Art piece with rotation
    { width: 1, height: 1, id: "piece2" }, // Art piece with scale
    { width: 2, height: 1, id: "piece3" }, // Wide art piece
  ]}
  columns={4}
  gap={12}
/>

Magazine Layout

A modern editorial layout with featured stories and pull quotes.

<CanvasGrid
  items={[
    { width: 3, height: 2, id: "cover" }, // Cover story
    { width: 1, height: 2, id: "quote" }, // Pull quote
  ]}
  columns={4}
  gap={12}
/>

Creative Studio Showcase

A dynamic portfolio layout with project timelines and metrics.

<CanvasGrid
  items={[
    { width: 2, height: 1, id: "metrics" }, // Studio metrics
    { width: 2, height: 2, id: "timeline" }, // Project timeline
    { width: 2, height: 1, id: "testimonial" }, // Client testimonial
  ]}
  columns={4}
  gap={12}
/>

Props

Canvas Grid

Prop name	Type	Default	Description
items	`CanvasGridItem[]`	Required	Array of items to display in the grid
columns	`number`	`4`	Number of columns in the grid
gap	`number`	`12`	Gap between grid items in pixels
className	`string`	-	Additional CSS classes

Canvas Grid Item

Prop name	Type	Default	Description
id	`string`	Required	Unique identifier for the item
content	`ReactNode`	Required	Content to display in the grid item
width	`number`	`1`	Width of the item in column units
height	`number`	`1`	Height of the item in row units