feat(grid): init component

src/components/grid.js

@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+
+const Container = styled.div`
+  display: grid;
+  gap: var(--spacing-x-sm) var(--spacing-y-sm);
+  ${props =>
+    props.columns &&
+    props.columns.map((column, i) =>
+      i === 0 && column > 1
+        ? css`
+            grid-template-columns: repeat(${column}, minmax(10px, 1fr));
+          `
+        : css`
+  @media (min-width: ${props.breakpoints[i - 1]}) {
+    grid-template-columns: repeat(${column}, minmax(10px, 1fr));
+    ${
+      i === 1 &&
+      css`
+        gap: var(--spacing-x-md) var(--spacing-y-md);
+      `
+    }
+`
+    )}
+`;
+
+export default function Grid({ columns, breakpoints = ["30em"], children }) {
+  return (
+    <Container columns={columns} breakpoints={breakpoints}>
+      {children}
+    </Container>
+  );
+}

src/components/index.js

@@ -3,6 +3,7 @@ export { default as Card } from "./card";
 export { default as Content } from "./content";
 export { default as CustomSlick } from "./custom-slick";
 export { default as Footer } from "./footer";
+export { default as Grid } from "./grid";
 export { default as HeaderLogo } from "./header-logo";
 export { default as Header } from "./header";
 export { default as Heading } from "./heading";

src/components/section.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { css } from "@emotion/react";
 import { Heading } from ".";
 
 const Container = styled.div`
@@ -23,27 +22,11 @@ const Head = styled.div`
   text-align: center;
 `;
 
-const Body = styled.div`
-  ${props =>
-    props.grid > 0 &&
-    css`
-      display: grid;
-      gap: var(--spacing-x-sm) 0;
-
-      @media (min-width: ${props.breakpoint}) {
-        grid-template-columns: repeat(${props.grid}, 1fr);
-        gap: var(--spacing-x-md);
-      }
-    `}
-`;
-
 export default function Section({
   heading,
   headingElement = "h2",
   children,
-  variant,
-  grid,
-  breakpoint = "30em"
+  variant
 }) {
   return (
     <Container variant={variant}>
@@ -53,9 +36,7 @@ export default function Section({
             <Heading el={headingElement}>{heading}</Heading>
           </Head>
         )}
-        <Body grid={grid} breakpoint={breakpoint}>
         {children}
-        </Body>
       </Content>
     </Container>
   );

src/pages/contact.js

@@ -4,6 +4,7 @@ import { Marker } from "google-maps-react";
 import Layout from "../layout";
 import {
   Button,
+  Grid,
   Header,
   Icon,
   IconWithContent,
@@ -56,7 +57,8 @@ export default function Index({ data }) {
       >
         <h1>Get in touch</h1>
       </Header>
-      <Section grid={2} breakpoint="40em">
+      <Section>
+        <Grid columns={[1, 2]} breakpoints={["40rem"]}>
           <div>
             <Text>Get in touch with us</Text>
             <Text textStyle="italic">More info here</Text>
@@ -133,6 +135,7 @@ export default function Index({ data }) {
               </>
             )}
           </div>
+        </Grid>
       </Section>
       <Map
         initialCenter={{