diff --git a/src/app.js b/src/app.js
index 1b05e34b2..279eb50f2 100644
--- a/src/app.js
+++ b/src/app.js
@@ -26,7 +26,8 @@ class App extends Component {
       'pages/view/tag/index',
       'pages/view/avatar/index',
       'pages/view/article/index',
-      'pages/layout/flex/index'
+      'pages/layout/flex/index',
+      'pages/layout/grid/index'
     ],
     window: {
       backgroundTextStyle: 'light',
diff --git a/src/components/grid/index.js b/src/components/grid/index.js
new file mode 100644
index 000000000..9a33c4681
--- /dev/null
+++ b/src/components/grid/index.js
@@ -0,0 +1,15 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import AtGridItem from './item/index'
+
+import './index.scss'
+
+export default class AtGrid extends Taro.Component {
+  static Item = AtGridItem
+
+  render () {
+    const { children } = this.props
+    return <View className='at-grid'>{children}</View>
+  }
+}
diff --git a/src/components/grid/index.scss b/src/components/grid/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/grid/item/index.js b/src/components/grid/item/index.js
new file mode 100644
index 000000000..adb5b20d6
--- /dev/null
+++ b/src/components/grid/item/index.js
@@ -0,0 +1,12 @@
+import Taro from '@tarojs/taro'
+
+import { View } from '@tarojs/components'
+
+import './index.scss'
+
+export default class AtGridItem extends Taro.Component {
+  render () {
+    const { children } = this.props
+    return <View className='at-grid-item'>{children}</View>
+  }
+}
diff --git a/src/components/grid/item/index.scss b/src/components/grid/item/index.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/layout/grid/index.js b/src/pages/layout/grid/index.js
new file mode 100644
index 000000000..8f27ddd54
--- /dev/null
+++ b/src/pages/layout/grid/index.js
@@ -0,0 +1,30 @@
+/* eslint taro/custom-component-children: 0 */
+import Taro from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+
+import AtGrid from '../../../components/grid/index'
+
+import './index.scss'
+
+export default class GridPage extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'Grid Page'
+  }
+
+  render () {
+    return (
+      <View className='grid__page'>
+        <View className='example'>
+          <View className='example__header'>
+            <Text className='example__header-title'>基本案例</Text>
+          </View>
+          <View className='example__body'>
+            <AtGrid mode='square'>
+              <AtGrid.Item />
+            </AtGrid>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}
diff --git a/src/pages/layout/grid/index.scss b/src/pages/layout/grid/index.scss
new file mode 100644
index 000000000..e69de29bb