Item Grid

ItemGrid is a reusable and responsive React component built with Tailwind CSS, perfect for displaying any collection of items in a flexible grid layout. It works seamlessly in Next.js or React.js projects and is ideal for showcasing products, blog posts, portfolio items, and more.

Item Grid preview

1. Setup codes

Create a new Card component components/ui/Card.tsx, then paste the code below

jsx
import React, { ReactNode } from "react";

interface ItemGridProps {
  children: ReactNode;
}

const ItemGrid = ({ children }: ItemGridProps) => {
  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {children}
    </div>
  );
};

export default ItemGrid;

This component will show 1 column in mobile, 2 columns for IPad, 3 columns fro laptop/pc, 4 columns for large screen.

2. Usages

Now you can use the Item Grid component to show items like Article Card, Product Card, or Gallery images, ...

jsx
import React from "react";

import Card from "@/components/Card";
import ItemGrid from "@/components/ItemGrid";

const DocItemGrid = () => {
  return (
    <div className="bg-gray-100">
      <ItemGrid>
        <Card title="Item 1" description="Cards are versatile UI elements." />
        <Card title="Item 2" description="Cards are versatile UI elements." />
        <Card title="Item 3" description="Cards are versatile UI elements." />
        <Card title="Item 4" description="Cards are versatile UI elements." />
      </ItemGrid>
    </div>
  );
};

export default DocItemGrid;

The UI like that (you can see more the my Card component)