如何在react中创建网格？

import React from 'react';
import './Grid.css'; // 引入样式文件

class GridComponent extends React.Component {
  render() {
    return (
      <div className="grid-container">
        <div className="grid-item">Item 1</div>
        <div className="grid-item">Item 2</div>
        <div className="grid-item">Item 3</div>
        {/* 添加更多网格项 */}
      </div>
    );
  }
}

export default GridComponent;

import React from 'react';
import GridLayout from 'react-grid-layout';

class GridComponent extends React.Component {
  render() {
    const layout = [
      { i: 'item1', x: 0, y: 0, w: 1, h: 1 },
      { i: 'item2', x: 1, y: 0, w: 1, h: 1 },
      { i: 'item3', x: 0, y: 1, w: 1, h: 1 },
      // 添加更多网格项
    ];

    return (
      <GridLayout className="layout" layout={layout} cols={2} rowHeight={100} width={800}>
        <div key="item1">Item 1</div>
        <div key="item2">Item 2</div>
        <div key="item3">Item 3</div>
        {/* 添加更多网格项 */}
      </GridLayout>
    );
  }
}

export default GridComponent;