Create Grid component

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>
+  );
+};

webui/src/common/components/Grid/index.js

@@ -0,0 +1 @@
+export { Grid as default } from './Grid.jsx';

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