fix: added a Grid component

stories/Card.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, { FunctionComponent, ReactNode } from 'react';
 import styles from './card.scss';
 import { Layout } from './constants';
+import { Grid } from './Grid';
 
 export interface CardProps {
   children?: ReactNode;
@@ -16,15 +17,15 @@ export const Card: FunctionComponent<CardProps> = ({
   ...props
 }: CardProps) => {
   return (
-    <div
+    <Grid
       className={classNames(
         styles.card,
-        styles[layout],
         className
       )}
+      layout={layout}
       {...props}
     >
       {children}
-    </div>
+    </Grid>
   );
 };

stories/Grid.scss

@@ -0,0 +1,13 @@
+.grid {
+  display: grid;
+
+  &.horizontal {
+    grid-auto-columns: min-content;
+    grid-auto-flow: column;
+  }
+
+  &.vertical {
+    grid-auto-rows: auto;
+    grid-auto-flow: row;
+  }
+}

stories/Grid.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button } from './Button';
+
+import { Grid, GridProps } from './Grid';
+import { Layout } from './constants';
+import { Icon } from './Icon';
+
+export default {
+  title: 'Components/Grid',
+  component: Grid,
+  argTypes: {
+    children: {
+      table:{
+        disable: true,
+      },
+    },
+  },
+};
+
+const Template = (args: GridProps) => <Grid {...args} />;
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  children: (
+    <>
+      <Button>
+        <Icon icon='delete' />
+      </Button>
+      <Button>
+        <Icon icon='share' />
+      </Button>
+    </>
+  ),
+  layout: Layout.Vertical,
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  children: (
+    <>
+      <Button>
+        <Icon icon='share'/>
+      </Button>
+      <Button>
+        <Icon icon='delete'/>
+      </Button>
+    </>
+  ),
+  layout: Layout.Horizontal,
+};

stories/Grid.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import React, { FunctionComponent, ReactNode } from 'react';
+import { Layout } from './constants';
+
+import styles from './Grid.scss';
+
+export interface GridProps {
+  children: ReactNode;
+  className?: string;
+  layout?: Layout;
+  spacing?: number;
+}
+
+export const Grid: FunctionComponent<GridProps> = ({
+  children,
+  className,
+  layout = Layout.Vertical,
+  spacing = 10,
+}: GridProps) => {
+  return (
+    <div
+      className={classNames(
+        styles.grid,
+        styles[layout],
+        className,
+      )}
+      style={{ gap: `${spacing}px` }}
+    >
+      {children}
+    </div>
+  );
+};

stories/card.scss

@@ -1,23 +1,11 @@
 @use './variables' as *;
 
 .card {
-  display: grid;
-  gap: 10px;
   border-radius: $border-radius;
   background-color: $secondary;
   color: $primary-accent;
   padding: $padding;
   box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 50%);
 
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-  &.horizontal {
-    grid-auto-columns: min-content;
-    grid-auto-flow: column;
-  }
-
-  &.vertical {
-    grid-auto-rows: auto;
-    grid-auto-flow: row;
-  }
 }

stories/index.tsx

@@ -5,3 +5,4 @@ export { Card } from './Card';
 export { Checkbox } from './Checkbox';
 export { Icon } from './Icon';
 export { Input } from './Input';
+export { Grid } from './Grid';