Grid Items List

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  justify-content: left;
  width: 100%;
  margin: 0 auto;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

import React from 'react';

interface Item {
  id: number;
  name: string;
  description: string;
  image: string;
}

const items: Item[] = [
  {
    id: 1,
    name: 'Item 1',
    description: 'This is the description for Item 1',
    image: 'https://via.placeholder.com/200x200.png?text=Item+1',
  },
  {
    id: 2,
    name: 'Item 2',
    description: 'This is the description for Item 2',
    image: 'https://via.placeholder.com/200x200.png?text=Item+2',
  },
  {
    id: 3,
    name: 'Item 3',
    description: 'This is the description for Item 3',
    image: 'https://via.placeholder.com/200x200.png?text=Item+3',
  },
  {
    id: 4,
    name: 'Item 4',
    description: 'This is the description for Item 4',
    image: 'https://via.placeholder.com/200x200.png?text=Item+4',
  },
  {
    id: 5,
    name: 'Item 5',
    description: 'This is the description for Item 5',
    image: 'https://via.placeholder.com/200x200.png?text=Item+5',
  },
];


interface Item {
  id: number;
  title: string;
}

interface ItemListProps {
  items: Item[];
}

const ItemList = ({ items }: ItemListProps) => {
  return (
    <div className="container">
      {items.map(item => (
        <div key={item.id} className="item">
          {item.title}
        </div>
      ))}
    </div>
  );
};

export default ItemList;