feat(project): add card grid component

src/components/CardGrid/CardGrid.module.scss

@@ -0,0 +1,4 @@
+.cardGrid {
+  display: grid;
+  grid-gap: 8px;
+}

src/components/CardGrid/CardGrid.test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import CardGrid from './CardGrid';
+
+describe('<CardGrid>', () => {
+  it('renders card grid and children', () => {
+    const { getByText } = render((<CardGrid>aa</CardGrid>));
+    const cardGrid = getByText(/aa/i);
+    expect(document.body.contains(cardGrid));
+  });
+});

src/components/CardGrid/CardGrid.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import useBreakpoint from '../../hooks/useBreakpoint';
+
+import styles from './CardGrid.module.scss';
+
+// TEMP DATA
+const cols = { "xs": 2, "sm": 3, "md": 4, "lg": 5, "xl": 6 }
+
+type CardGridProps = {
+  children: React.ReactNode;
+};
+
+function CardGrid({
+  children,
+}: CardGridProps) {
+  const breakpoint = useBreakpoint();
+
+  return (
+    <div
+      className={styles.cardGrid}
+      style={{ gridTemplateColumns: `repeat(${cols[breakpoint]}, minmax(0,1fr))` }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default CardGrid;