fix(Grid): allow more flexibility with gap customization

stories/Card.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 import styles from './Card.scss';
 import { Layout } from './constants';
-import { Grid } from './Grid';
+import { Gap, Grid } from './Grid';
 import { Spinner } from './Spinner';
 
 export interface CardProps {
@@ -11,13 +11,15 @@ export interface CardProps {
   className?: string;
   layout?: Layout;
   loading?: boolean;
+  gap?: number | Gap;
 }
 
 export function Card({
   children,
   className,
   layout = Layout.Vertical,
   loading = false,
+  gap,
   ...props
 }: CardProps): JSX.Element {
   return (
@@ -33,6 +35,7 @@ export function Card({
           styles.content,
           className,
         )}
+        gap={gap}
         layout={layout}
       >
         {children}

stories/Grid.tsx

@@ -4,14 +4,19 @@ import { AlignItems, JustifyContent, Layout } from './constants';
 
 import styles from './Grid.scss';
 
+export interface Gap {
+  row: number;
+  column: number;
+}
+
 export interface GridProps {
   [key: string]: any;
   alignItems?: AlignItems;
   justifyContent?: JustifyContent;
   children: ReactNode;
   className?: string;
   layout: Layout;
-  gap?: number;
+  gap?: number | Gap;
   type?: ElementType;
 }
 
@@ -25,6 +30,13 @@ export function Grid({
   type: Type = 'div',
   ...props
 }: GridProps): JSX.Element {
+  const normalizedGap: Gap = typeof(gap) === 'number' ? {
+    column: gap,
+    row: gap,
+  } : {
+    column: gap.column,
+    row: gap.row,
+  };
   return (
     <Type
       className={classNames(
@@ -34,7 +46,8 @@ export function Grid({
       )}
       style={{
         alignItems,
-        gap: `${gap}px`,
+        columnGap: `${normalizedGap.column}px`,
+        rowGap: `${normalizedGap.row}px`,
         justifyContent,
       }}
       {...props}