diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
new file mode 100644
index 000000000..4809221d5
--- /dev/null
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -0,0 +1,44 @@
+<template>
+  <component
+    :is="tag"
+    class="ds-grid"
+    :style="styles"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'DsGrid',
+  props: {
+    gap: {
+      type: Number,
+      default: 16, // TODO: how to use tokens.small here?
+    },
+    minColumnWidth: {
+      type: Number,
+      default: 300,
+    },
+    rowHeight: {
+      type: Number,
+      default: 20,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  computed: {
+    styles() {
+      return ({
+        gridTemplateColumns: `repeat(auto-fill, minmax(${this.minColumnWidth}px, 1fr`,
+        gridGap: `${this.gap}px`,
+        gridAutoRows: `${this.rowHeight}px`,
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss" />
diff --git a/src/system/components/layout/Grid/GridItem.vue b/src/system/components/layout/Grid/GridItem.vue
new file mode 100644
index 000000000..1f3989e36
--- /dev/null
+++ b/src/system/components/layout/Grid/GridItem.vue
@@ -0,0 +1,13 @@
+<template>
+  <component :is="tag">
+    <slot />
+  </component>
+</template>
+
+<script>
+  export default {
+  name: 'DsGridItem',
+  }
+</script>
+
+<style/>
diff --git a/src/system/components/layout/Grid/demo.md b/src/system/components/layout/Grid/demo.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/system/components/layout/Grid/style.scss b/src/system/components/layout/Grid/style.scss
new file mode 100644
index 000000000..08069ea71
--- /dev/null
+++ b/src/system/components/layout/Grid/style.scss
@@ -0,0 +1,3 @@
+.ds-grid {
+  display: grid;
+}