chakraUI的Grid部品用法

Chakra UI是一个基于React的现代UI组件库，它提供了一个名为`Grid`的强大网格系统，用于创建响应式的布局。`Grid`可以帮助你在网页上轻松构建复杂的表格、栅格布局等。以下是使用Chakra UI Grid的基本用法：

1. **引入依赖**:
首先需要安装Chakra UI库，如果还没有安装，可以使用npm或yarn添加到项目中：

   npm install @chakra-ui/react @chakra-ui/system
   # 或者
   yarn add @chakra-ui/react @chakra-ui/system

2. **导入并使用Grid组件**:

   import { Box, Grid } from '@chakra-ui/react';

3. **设置列数和行**:

   <Grid container spacing={4}>
     {/* columns and rows */}
   </Grid>

`container`属性告诉Chakra UI这是一个容器，`spacing`控制元素之间的间距。

4. **定义列**:
每个单元格可以通过`Grid.Item`定义，并指定其列宽百分比：

   <Grid.Item sm={6} md={4}> <!-- small screen size (sm) takes up 6/12 columns, medium screen (md) takes 4/12 -->
     <Box>...</Box>
   </Grid.Item>

5. **响应式布局**:
Chakra UI Grid允许你根据屏幕尺寸调整网格布局。比如，`sm`表示小屏幕设备，`md`表示中等屏幕，可以根据需要添加更多媒体查询。

<Grid gridTemplateColumns={['repeat(3, 1fr)', 'repeat(2, 1fr)']} breakpoints={{ sm: '1fr', md: '1fr 1fr' }}> ... </Grid>