+
+
+}
+
+export default TDemoBlock;
diff --git a/docs/mobile/components/Header.jsx b/docs/mobile/components/Header.jsx
new file mode 100644
index 00000000..d614aa4e
--- /dev/null
+++ b/docs/mobile/components/Header.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+const THeader = (prop) => {
+
+ const { title } = prop;
+
+ return <>
+ {
+ title ? ({ title }
+{ summary }
+ { children } +
+
) : null
+ }
+
+}
+
+export default THeader;
diff --git a/docs/mobile/main.jsx b/docs/mobile/main.jsx
index e8b028c6..5ffd3860 100644
--- a/docs/mobile/main.jsx
+++ b/docs/mobile/main.jsx
@@ -1,13 +1,17 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
import App from './App';
+import '../style/mobile/index.less'
import '../../src/_common/style/mobile/_reset.less';
import '../../src/_common/style/mobile/index.less';
ReactDOM.render(
{ title }
+ {/*
+
+ Grid 宫格
+横向分割的点击单元，用作一组次级功能的入口。
+
+
+ }
+ text={}
+ text={}
+ text={
+
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+
+
+ }
+ text={}
+ text={}
+ text={}
+ text={}
+ text={
+
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+
+
+ }
+ text={}
+ text={}
+ text={
+
+
+}
diff --git a/examples/grid/demos/layout.jsx b/examples/grid/demos/layout.jsx
new file mode 100644
index 00000000..50115618
--- /dev/null
+++ b/examples/grid/demos/layout.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Grid, GridItem } from 'tdesign-mobile-react';
+
+const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png'
+
+export default function () {
+ return <>
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+ 标题文字
}
+ />
+
+ {
+ React.Children.map(children, (child: React.ReactElement) => React.cloneElement(child, {
+ border,
+ align,
+ column,
+ hover,
+ }))
+ }
+
+
+}
+
+export default Grid;
diff --git a/src/grid/GridItem.tsx b/src/grid/GridItem.tsx
new file mode 100644
index 00000000..dce7b729
--- /dev/null
+++ b/src/grid/GridItem.tsx
@@ -0,0 +1,133 @@
+import React, { FC } from "react";
+import { TdGridItemProps, TdGridProps } from "./type";
+
+const prefix = 't';
+const name = `${prefix}-grid-item`;
+
+enum LAYOUT {
+ VERTICAL = 'vertical',
+ HORIZONTAL = 'horizontal'
+}
+
+enum ALIGN {
+ CENTER = 'center',
+ LEFT = 'left',
+}
+
+const DEFAULT_COLUMN = 4;
+
+const DEFAULT_ALIGN = ALIGN.CENTER;
+
+const DEFAULT_GUTTER = 20;
+
+const DEFAULT_LAYOUT = LAYOUT.VERTICAL;
+
+const DEFAULT_HOVER = false;
+
+const DEFAULT_BORDER = false;
+
+const getGridItemWidth = (column) => `${100 / column}%`;
+
+const getBorderStyle = (border) => {
+ if (typeof border === 'boolean') {
+ if (border) {
+ return {
+ borderColor: '#f6f6f6',
+ borderWidth: '1px',
+ borderStyle: 'solid'
+ };
+ }
+
+ return {}
+ }
+ const {color, width, style} = border;
+ return {
+ borderColor: color || '#f6f6f6',
+ borderWidth: width || '1px',
+ borderStyle: style || 'solid',
+ };
+}
+
+const getLayout = (layout) => {
+ const layoutMap = {
+ [LAYOUT.VERTICAL] : 'column',
+ [LAYOUT.HORIZONTAL]: 'row',
+ }
+ return layoutMap[layout];
+}
+
+const getGridItemTextAlign = (align) => align === ALIGN.LEFT ? ALIGN.LEFT : ALIGN.CENTER;
+
+const getGridItemAlign = (align, layout) => {
+ const contentAlign = getGridItemTextAlign(align);
+ if (layout === LAYOUT.HORIZONTAL) {
+ return {
+ justifyContent: contentAlign,
+ }
+ }
+ return {
+ alignItems: contentAlign
+ }
+};
+
+
+export interface GridItemProp extends TdGridItemProps, TdGridProps {}
+
+const GridItem: FC
+
+
+}
+
+export default GridItem;
diff --git a/src/grid/index.tsx b/src/grid/index.tsx
new file mode 100644
index 00000000..cb713110
--- /dev/null
+++ b/src/grid/index.tsx
@@ -0,0 +1,16 @@
+import _Grid from './Grid';
+import _GridItem from './GridItem';
+
+import './style';
+
+export * from './type';
+
+export const Grid = _Grid;
+
+export const GridItem = _GridItem;
+
+export default {
+ Grid,
+ GridItem
+};
+
diff --git a/src/grid/style/css.js b/src/grid/style/css.js
new file mode 100644
index 00000000..6a9a4b13
--- /dev/null
+++ b/src/grid/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/grid/style/index.js b/src/grid/style/index.js
new file mode 100644
index 00000000..6d358f7a
--- /dev/null
+++ b/src/grid/style/index.js
@@ -0,0 +1,2 @@
+import '../../_common/style/mobile/components/grid/_index.less';
+import '../../_common/style/mobile/components/grid-item/_index.less';
diff --git a/src/grid/type.ts b/src/grid/type.ts
new file mode 100644
index 00000000..0daa5ea9
--- /dev/null
+++ b/src/grid/type.ts
@@ -0,0 +1,54 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdGridProps {
+ /**
+ * 内容对齐方式
+ * @default center
+ */
+ align?: 'left' | 'center';
+ /**
+ * 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式
+ * @default false
+ */
+ border?: boolean | { color?: string; width?: string; style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset' };
+ /**
+ * 每一行的列数量
+ * @default 4
+ */
+ column?: number;
+ /**
+ * 间隔大小
+ */
+ gutter?: number;
+ /**
+ * 是否开启点击反馈
+ * @default false
+ */
+ hover?: boolean;
+}
+
+export interface TdGridItemProps {
+ /**
+ * 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点
+ */
+ description?: TNode;
+ /**
+ * 图片，可以是图片地址，也可以自定义图片节点
+ */
+ image?: TNode;
+ /**
+ * 内容布局方式
+ * @default vertical
+ */
+ layout?: 'vertical' | 'horizontal';
+ /**
+ * 文本，可以通过 Props 传入文本，也可以自定义标题节点
+ */
+ text?: TNode;
+}
diff --git a/src/index.ts b/src/index.ts
index eaf5eea7..2ffd49c7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
export * from './button';
+export * from './grid'
+ {gridItemImage}
+
+
+
+
+ { text }
+
+
+ { description }
+
+