1 files changed, 32 insertions, 0 deletions
diff --git a/src/components/common/GridRow.tsx b/src/components/common/GridRow.tsx
new file mode 100644
index 0000000..72f1db6
--- /dev/null
+++ b/src/components/common/GridRow.tsx
@@ -0,0 +1,32 @@
+import { Grid } from '@umami/react-zen';
+
+const LAYOUTS = {
+  one: { columns: '1fr' },
+  two: {
+    columns: {
+      xs: '1fr',
+      md: 'repeat(auto-fill, minmax(560px, 1fr))',
+    },
+  },
+  three: {
+    columns: {
+      xs: '1fr',
+      md: 'repeat(auto-fill, minmax(360px, 1fr))',
+    },
+  },
+  'one-two': { columns: { xs: '1fr', md: 'repeat(3, 1fr)' } },
+  'two-one': { columns: { xs: '1fr', md: 'repeat(3, 1fr)' } },
+};
+
+export function GridRow(props: {
+  layout?: 'one' | 'two' | 'three' | 'one-two' | 'two-one' | 'compare';
+  className?: string;
+  children?: any;
+}) {
+  const { layout = 'two', children, ...otherProps } = props;
+  return (
+    <Grid gap="3" {...LAYOUTS[layout]} {...otherProps}>
+      {children}
+    </Grid>
+  );
+}