diff --git a/src-next/grid-item/index.js b/src-next/grid-item/index.js
new file mode 100644
index 000000000..c003d9dbb
--- /dev/null
+++ b/src-next/grid-item/index.js
@@ -0,0 +1,151 @@
+// Utils
+import { createNamespace, addUnit } from '../utils';
+import { BORDER } from '../utils/constant';
+import { route, routeProps } from '../utils/router';
+
+// Mixins
+import { ChildrenMixin } from '../mixins/relation';
+
+// Components
+import Info from '../info';
+import Icon from '../icon';
+
+const [createComponent, bem] = createNamespace('grid-item');
+
+export default createComponent({
+ mixins: [ChildrenMixin('vanGrid')],
+
+ props: {
+ ...routeProps,
+ dot: Boolean,
+ text: String,
+ icon: String,
+ iconPrefix: String,
+ badge: [Number, String],
+ },
+
+ emits: ['click'],
+
+ computed: {
+ style() {
+ const { square, gutter, columnNum } = this.parent;
+ const percent = `${100 / columnNum}%`;
+
+ const style = {
+ flexBasis: percent,
+ };
+
+ if (square) {
+ style.paddingTop = percent;
+ } else if (gutter) {
+ const gutterValue = addUnit(gutter);
+ style.paddingRight = gutterValue;
+
+ if (this.index >= columnNum) {
+ style.marginTop = gutterValue;
+ }
+ }
+
+ return style;
+ },
+
+ contentStyle() {
+ const { square, gutter } = this.parent;
+
+ if (square && gutter) {
+ const gutterValue = addUnit(gutter);
+
+ return {
+ right: gutterValue,
+ bottom: gutterValue,
+ height: 'auto',
+ };
+ }
+ },
+ },
+
+ methods: {
+ onClick(event) {
+ this.$emit('click', event);
+ route(this.$router, this);
+ },
+
+ genIcon() {
+ if (this.$slots.icon) {
+ return (
+
+ {this.$slots.icon()}
+
+
+ );
+ }
+
+ if (this.icon) {
+ return (
+
+ );
+ }
+ },
+
+ getText() {
+ if (this.$slots.text) {
+ return this.$slots.text();
+ }
+
+ if (this.text) {
+ return {this.text};
+ }
+ },
+
+ genContent() {
+ if (this.$slots.default) {
+ return this.$slots.default();
+ }
+
+ return [this.genIcon(), this.getText()];
+ },
+ },
+
+ render() {
+ const {
+ center,
+ border,
+ square,
+ gutter,
+ direction,
+ clickable,
+ } = this.parent;
+
+ return (
+
+
+ {this.genContent()}
+
+
+ {this.$slots.default?.()}
+
+ );
+ },
+});
diff --git a/src-next/grid/index.less b/src-next/grid/index.less
new file mode 100644
index 000000000..47a890003
--- /dev/null
+++ b/src-next/grid/index.less
@@ -0,0 +1,6 @@
+@import '../style/var';
+
+.van-grid {
+ display: flex;
+ flex-wrap: wrap;
+}
diff --git a/src-next/grid/test/__snapshots__/demo.spec.js.snap b/src-next/grid/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..4b9a61ac3
--- /dev/null
+++ b/src-next/grid/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+