在react中使用map渲染2列

const data = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
  { id: 5, name: 'Item 5' },
  // 添加更多数据...
];

import React from 'react';

const MyComponent = () => {
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    // 添加更多数据...
  ];

  return (
    <div className="grid-container">
      {data.map(item => (
        <div key={item.id} className="grid-item">
          {item.name}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); // 两列布局
  grid-gap: 10px; // 列之间的间距
}

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