diff --git a/webui/src/common/components/Grid/Grid.jsx b/webui/src/common/components/Grid/Grid.jsx
new file mode 100644
index 0000000..4db0ffd
--- /dev/null
+++ b/webui/src/common/components/Grid/Grid.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import './styles.sass';
+
+export const Grid = ({
+  children,
+  columns = 'auto-fill',
+  minWidth = '300px',
+  gap = '1.5rem',
+  className = '',
+  ...rest
+}) => {
+  const gridStyle = {
+    '--grid-columns': columns === 'auto-fill' ? `repeat(auto-fill, minmax(${minWidth}, 1fr))` : `repeat(${columns}, 1fr)`,
+    '--grid-gap': gap
+  };
+
+  return (
+    <div 
+      className={`grid ${className}`} 
+      style={gridStyle}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/webui/src/common/components/Grid/index.js b/webui/src/common/components/Grid/index.js
new file mode 100644
index 0000000..5ac9a91
--- /dev/null
+++ b/webui/src/common/components/Grid/index.js
@@ -0,0 +1 @@
+export { Grid as default } from './Grid.jsx';
\ No newline at end of file
diff --git a/webui/src/common/components/Grid/styles.sass b/webui/src/common/components/Grid/styles.sass
new file mode 100644
index 0000000..a72277f
--- /dev/null
+++ b/webui/src/common/components/Grid/styles.sass
@@ -0,0 +1,8 @@
+.grid
+  display: grid
+  grid-template-columns: var(--grid-columns)
+  gap: var(--grid-gap)
+
+@media (max-width: 768px)
+  .grid
+    grid-template-columns: 1fr
\ No newline at end of file