diff --git a/packages/react/src/components/Grid/Grid.js b/packages/react/src/components/Grid/Grid.js
index ebd0508d7..b3d544449 100644
--- a/packages/react/src/components/Grid/Grid.js
+++ b/packages/react/src/components/Grid/Grid.js
@@ -1,21 +1,117 @@
 import React from 'react';
+import { css } from '@emotion/react';
 import { Box } from '../Box';
-import { GridItem } from './GridItem';
-import classes from './Grid.module.css';
-
-const getClassNames = (breakPoints) =>
-  Object.keys(breakPoints)
-    .filter((key) => !!breakPoints[key])
-    .map((key) => classes[`ec-grid--${key}`])
-    .concat(classes['ec-grid'])
-    .join(' ');
-
-const Grid = ({ xs, sm, md, lg, xl, ...props }) => (
-  <Box className={classes['ec-grid__wrapper']}>
-    <Box className={getClassNames({ xs, sm, md, lg, xl })} {...props} />
+
+import GridItem from './GridItem';
+
+const GridContainer = ({
+  xs,
+  md,
+  lg,
+  xl,
+  xxl,
+  cols,
+  gap,
+  gapX,
+  gapY,
+  children,
+}) => (
+  <Box
+    css={css`
+      display: grid;
+      height: 100%;
+      ${cols && `grid-template-columns: repeat(${cols}, 1fr);`}
+      ${gap && `gap: ${gap};`}
+      ${gapX && `column-gap: ${gapX};`}
+      ${gapY && `row-gap: ${gapY};`}
+
+      @media (max-width: 600px) {
+        ${xs && xs.cols && `grid-template-columns: repeat(${xs.cols}, 1fr);`};
+        ${xs && xs.gapX && `column-gap: ${xs.gapX};`};
+      }
+
+      @media (min-width: 600px) {
+        ${md && md.cols && `grid-template-columns: repeat(${md.cols}, 1fr);`};
+        ${md && md.gapX && `column-gap: ${md.gapX};`};
+      }
+
+      @media (min-width: 768px) {
+        ${lg && lg.cols && `grid-template-columns: repeat(${lg.cols}, 1fr);`};
+        ${lg && lg.gapX && `column-gap: ${lg.gapX};`};
+      }
+
+      @media (min-width: 992px) {
+        ${xl && xl.cols && `grid-template-columns: repeat(${xl.cols}, 1fr);`};
+        ${xl && xl.gapX && `column-gap: ${xl.gapX};`};
+      }
+
+      @media (min-width: 1200px) {
+        ${xxl &&
+        xxl.cols &&
+        `grid-template-columns: repeat(${xxl.cols}, 1fr);`};
+        ${xxl && xxl.gapX && `column-gap: ${xxl.gapX};`};
+      }
+    `}
+  >
+    {children}
   </Box>
 );
 
+const Grid = ({ xs, md, lg, xl, xxl, cols, gap, gapX, gapY, children }) => (
+  <GridContainer
+    xs={xs}
+    md={md}
+    lg={lg}
+    xl={xl}
+    xxl={xxl}
+    cols={cols}
+    gap={gap}
+    gapX={gapX}
+    gapY={gapY}
+  >
+    {children}
+  </GridContainer>
+);
+
 Grid.Item = GridItem;
 
 export default Grid;
+
+// Example Usage
+
+/* <Grid
+  xs={{ cols: 1 }}
+  md={{ cols: 3 }}
+  lg={{ cols: 4 }}
+  xl={{ cols: 5 }}
+  xxl={{ cols: 6 }}
+  gapX="10px"
+  gapY="10px"
+>
+  <Grid.Item xs={{ colSpan: 1 }} md={{ colSpan: 2 }} xxl={{ colSpan: 3 }}>
+    <Grid gap="10px" xs={{ cols: 1 }} gapX="5px">
+      <Grid.Item>1.1</Grid.Item>
+      <Grid.Item>1.2</Grid.Item>
+    </Grid>
+  </Grid.Item>
+  <Grid.Item lg={{ colSpan: 2 }} xl={{ colSpan: 3 }}>
+    2
+  </Grid.Item>
+  <Grid.Item lg={{ colSpan: 4 }} xl={{ colSpan: 3 }} xxl={{ colSpan: 4 }}>
+    3
+  </Grid.Item>
+  <Grid.Item lg={{ colSpan: 4 }} xl={{ colSpan: 2 }}>
+    4
+  </Grid.Item>
+  <Grid.Item lg={{ colSpan: 4 }} xl={{ colSpan: 2 }} xxl={{ colSpan: 6 }}>
+    5
+  </Grid.Item>
+  <Grid.Item
+    md={{ colSpan: 3 }}
+    lg={{ colSpan: 4 }}
+    xl={{ colSpan: 3 }}
+    xxl={{ colSpan: 6 }}
+  >
+    6
+  </Grid.Item>
+</Grid>; */
diff --git a/packages/react/src/components/Grid/Grid.module.css b/packages/react/src/components/Grid/Grid.module.css
deleted file mode 100644
index f57258a6f..000000000
--- a/packages/react/src/components/Grid/Grid.module.css
+++ /dev/null
@@ -1,823 +0,0 @@
-.ec-grid {
-  display: flex;
-  flex-flow: row wrap;
-  margin-block: calc(to-rem(16) / -2);
-  margin-inline: calc(to-rem(16) / -2);
-}
-.ec-grid__wrapper {
-  overflow: hidden;
-}
-.ec-grid--xs > .ec-grid {
-  margin-block: calc(to-rem(16) / -2);
-  margin-inline: calc(to-rem(16) / -2);
-}
-@media screen and (min-width: to-em(600)) {
-  .ec-grid {
-    margin-block: calc(to-rem(16) / -2);
-    margin-inline: calc(to-rem(16) / -2);
-  }
-}
-.ec-grid--sm > .ec-grid {
-  margin-block: calc(to-rem(16) / -2);
-  margin-inline: calc(to-rem(16) / -2);
-}
-@media screen and (min-width: to-em(768)) {
-  .ec-grid {
-    margin-block: calc(to-rem(24) / -2);
-    margin-inline: calc(to-rem(24) / -2);
-  }
-}
-.ec-grid--md > .ec-grid {
-  margin-block: calc(to-rem(24) / -2);
-  margin-inline: calc(to-rem(24) / -2);
-}
-@media screen and (min-width: to-em(1024)) {
-  .ec-grid {
-    margin-block: calc(to-rem(24) / -2);
-    margin-inline: calc(to-rem(24) / -2);
-  }
-}
-.ec-grid--lg > .ec-grid {
-  margin-block: calc(to-rem(24) / -2);
-  margin-inline: calc(to-rem(24) / -2);
-}
-@media screen and (min-width: to-em(1280)) {
-  .ec-grid {
-    margin-block: calc(to-rem(24) / -2);
-    margin-inline: calc(to-rem(24) / -2);
-  }
-}
-.ec-grid--xl > .ec-grid {
-  margin-block: calc(to-rem(24) / -2);
-  margin-inline: calc(to-rem(24) / -2);
-}
-@media screen and (min-width: to-em(1600)) {
-  .ec-grid {
-    margin-block: calc(to-rem(24) / -2);
-    margin-inline: calc(to-rem(24) / -2);
-  }
-}
-.ec-grid--xxl > .ec-grid {
-  margin-block: calc(to-rem(24) / -2);
-  margin-inline: calc(to-rem(24) / -2);
-}
-@media screen and (min-width: to-em(1920)) {
-  .ec-grid {
-    margin-block: calc(to-rem(24) / -2);
-    margin-inline: calc(to-rem(24) / -2);
-  }
-}
-.ec-grid--xxxl > .ec-grid {
-  margin-block: calc(to-rem(24) / -2);
-  margin-inline: calc(to-rem(24) / -2);
-}
-
-.ec-grid__item {
-  flex: 1 1 0;
-  padding-block: calc(to-rem(16) / 2);
-  padding-inline: calc(to-rem(16) / 2);
-}
-.ec-grid__item--xs-1 {
-  flex-grow: 0;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.ec-grid__item--xs-2 {
-  flex-grow: 0;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.ec-grid__item--xs-3 {
-  flex-grow: 0;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.ec-grid__item--xs-4 {
-  flex-grow: 0;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-.ec-grid--xs > .ec-grid__item {
-  padding-block: calc(to-rem(16) / 2);
-  padding-inline: calc(to-rem(16) / 2);
-}
-.ec-grid--xs > .ec-grid__item--xs-1 {
-  flex-grow: 0;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.ec-grid--xs > .ec-grid__item--xs-2 {
-  flex-grow: 0;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.ec-grid--xs > .ec-grid__item--xs-3 {
-  flex-grow: 0;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.ec-grid--xs > .ec-grid__item--xs-4 {
-  flex-grow: 0;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-@media screen and (min-width: to-em(600)) {
-  .ec-grid__item {
-    padding-block: calc(to-rem(16) / 2);
-    padding-inline: calc(to-rem(16) / 2);
-  }
-  .ec-grid__item--sm-1 {
-    flex-grow: 0;
-    flex-basis: 12.5%;
-    max-width: 12.5%;
-  }
-  .ec-grid__item--sm-2 {
-    flex-grow: 0;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-  .ec-grid__item--sm-3 {
-    flex-grow: 0;
-    flex-basis: 37.5%;
-    max-width: 37.5%;
-  }
-  .ec-grid__item--sm-4 {
-    flex-grow: 0;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-  .ec-grid__item--sm-5 {
-    flex-grow: 0;
-    flex-basis: 62.5%;
-    max-width: 62.5%;
-  }
-  .ec-grid__item--sm-6 {
-    flex-grow: 0;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-  .ec-grid__item--sm-7 {
-    flex-grow: 0;
-    flex-basis: 87.5%;
-    max-width: 87.5%;
-  }
-  .ec-grid__item--sm-8 {
-    flex-grow: 0;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-.ec-grid--sm > .ec-grid__item {
-  padding-block: calc(to-rem(16) / 2);
-  padding-inline: calc(to-rem(16) / 2);
-}
-.ec-grid--sm > .ec-grid__item--sm-1 {
-  flex-grow: 0;
-  flex-basis: 12.5%;
-  max-width: 12.5%;
-}
-.ec-grid--sm > .ec-grid__item--sm-2 {
-  flex-grow: 0;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.ec-grid--sm > .ec-grid__item--sm-3 {
-  flex-grow: 0;
-  flex-basis: 37.5%;
-  max-width: 37.5%;
-}
-.ec-grid--sm > .ec-grid__item--sm-4 {
-  flex-grow: 0;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.ec-grid--sm > .ec-grid__item--sm-5 {
-  flex-grow: 0;
-  flex-basis: 62.5%;
-  max-width: 62.5%;
-}
-.ec-grid--sm > .ec-grid__item--sm-6 {
-  flex-grow: 0;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.ec-grid--sm > .ec-grid__item--sm-7 {
-  flex-grow: 0;
-  flex-basis: 87.5%;
-  max-width: 87.5%;
-}
-.ec-grid--sm > .ec-grid__item--sm-8 {
-  flex-grow: 0;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-@media screen and (min-width: to-em(768)) {
-  .ec-grid__item {
-    padding-block: calc(to-rem(24) / 2);
-    padding-inline: calc(to-rem(24) / 2);
-  }
-  .ec-grid__item--md-1 {
-    flex-grow: 0;
-    flex-basis: 12.5%;
-    max-width: 12.5%;
-  }
-  .ec-grid__item--md-2 {
-    flex-grow: 0;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-  .ec-grid__item--md-3 {
-    flex-grow: 0;
-    flex-basis: 37.5%;
-    max-width: 37.5%;
-  }
-  .ec-grid__item--md-4 {
-    flex-grow: 0;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-  .ec-grid__item--md-5 {
-    flex-grow: 0;
-    flex-basis: 62.5%;
-    max-width: 62.5%;
-  }
-  .ec-grid__item--md-6 {
-    flex-grow: 0;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-  .ec-grid__item--md-7 {
-    flex-grow: 0;
-    flex-basis: 87.5%;
-    max-width: 87.5%;
-  }
-  .ec-grid__item--md-8 {
-    flex-grow: 0;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-.ec-grid--md > .ec-grid__item {
-  padding-block: calc(to-rem(24) / 2);
-  padding-inline: calc(to-rem(24) / 2);
-}
-.ec-grid--md > .ec-grid__item--md-1 {
-  flex-grow: 0;
-  flex-basis: 12.5%;
-  max-width: 12.5%;
-}
-.ec-grid--md > .ec-grid__item--md-2 {
-  flex-grow: 0;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.ec-grid--md > .ec-grid__item--md-3 {
-  flex-grow: 0;
-  flex-basis: 37.5%;
-  max-width: 37.5%;
-}
-.ec-grid--md > .ec-grid__item--md-4 {
-  flex-grow: 0;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.ec-grid--md > .ec-grid__item--md-5 {
-  flex-grow: 0;
-  flex-basis: 62.5%;
-  max-width: 62.5%;
-}
-.ec-grid--md > .ec-grid__item--md-6 {
-  flex-grow: 0;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.ec-grid--md > .ec-grid__item--md-7 {
-  flex-grow: 0;
-  flex-basis: 87.5%;
-  max-width: 87.5%;
-}
-.ec-grid--md > .ec-grid__item--md-8 {
-  flex-grow: 0;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-@media screen and (min-width: to-em(1024)) {
-  .ec-grid__item {
-    padding-block: calc(to-rem(24) / 2);
-    padding-inline: calc(to-rem(24) / 2);
-  }
-  .ec-grid__item--lg-1 {
-    flex-grow: 0;
-    flex-basis: 8.3333333333%;
-    max-width: 8.3333333333%;
-  }
-  .ec-grid__item--lg-2 {
-    flex-grow: 0;
-    flex-basis: 16.6666666667%;
-    max-width: 16.6666666667%;
-  }
-  .ec-grid__item--lg-3 {
-    flex-grow: 0;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-  .ec-grid__item--lg-4 {
-    flex-grow: 0;
-    flex-basis: 33.3333333333%;
-    max-width: 33.3333333333%;
-  }
-  .ec-grid__item--lg-5 {
-    flex-grow: 0;
-    flex-basis: 41.6666666667%;
-    max-width: 41.6666666667%;
-  }
-  .ec-grid__item--lg-6 {
-    flex-grow: 0;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-  .ec-grid__item--lg-7 {
-    flex-grow: 0;
-    flex-basis: 58.3333333333%;
-    max-width: 58.3333333333%;
-  }
-  .ec-grid__item--lg-8 {
-    flex-grow: 0;
-    flex-basis: 66.6666666667%;
-    max-width: 66.6666666667%;
-  }
-  .ec-grid__item--lg-9 {
-    flex-grow: 0;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-  .ec-grid__item--lg-10 {
-    flex-grow: 0;
-    flex-basis: 83.3333333333%;
-    max-width: 83.3333333333%;
-  }
-  .ec-grid__item--lg-11 {
-    flex-grow: 0;
-    flex-basis: 91.6666666667%;
-    max-width: 91.6666666667%;
-  }
-  .ec-grid__item--lg-12 {
-    flex-grow: 0;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-.ec-grid--lg > .ec-grid__item {
-  padding-block: calc(to-rem(24) / 2);
-  padding-inline: calc(to-rem(24) / 2);
-}
-.ec-grid--lg > .ec-grid__item--lg-1 {
-  flex-grow: 0;
-  flex-basis: 8.3333333333%;
-  max-width: 8.3333333333%;
-}
-.ec-grid--lg > .ec-grid__item--lg-2 {
-  flex-grow: 0;
-  flex-basis: 16.6666666667%;
-  max-width: 16.6666666667%;
-}
-.ec-grid--lg > .ec-grid__item--lg-3 {
-  flex-grow: 0;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.ec-grid--lg > .ec-grid__item--lg-4 {
-  flex-grow: 0;
-  flex-basis: 33.3333333333%;
-  max-width: 33.3333333333%;
-}
-.ec-grid--lg > .ec-grid__item--lg-5 {
-  flex-grow: 0;
-  flex-basis: 41.6666666667%;
-  max-width: 41.6666666667%;
-}
-.ec-grid--lg > .ec-grid__item--lg-6 {
-  flex-grow: 0;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.ec-grid--lg > .ec-grid__item--lg-7 {
-  flex-grow: 0;
-  flex-basis: 58.3333333333%;
-  max-width: 58.3333333333%;
-}
-.ec-grid--lg > .ec-grid__item--lg-8 {
-  flex-grow: 0;
-  flex-basis: 66.6666666667%;
-  max-width: 66.6666666667%;
-}
-.ec-grid--lg > .ec-grid__item--lg-9 {
-  flex-grow: 0;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.ec-grid--lg > .ec-grid__item--lg-10 {
-  flex-grow: 0;
-  flex-basis: 83.3333333333%;
-  max-width: 83.3333333333%;
-}
-.ec-grid--lg > .ec-grid__item--lg-11 {
-  flex-grow: 0;
-  flex-basis: 91.6666666667%;
-  max-width: 91.6666666667%;
-}
-.ec-grid--lg > .ec-grid__item--lg-12 {
-  flex-grow: 0;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-@media screen and (min-width: to-em(1280)) {
-  .ec-grid__item {
-    padding-block: calc(to-rem(24) / 2);
-    padding-inline: calc(to-rem(24) / 2);
-  }
-  .ec-grid__item--xl-1 {
-    flex-grow: 0;
-    flex-basis: 8.3333333333%;
-    max-width: 8.3333333333%;
-  }
-  .ec-grid__item--xl-2 {
-    flex-grow: 0;
-    flex-basis: 16.6666666667%;
-    max-width: 16.6666666667%;
-  }
-  .ec-grid__item--xl-3 {
-    flex-grow: 0;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-  .ec-grid__item--xl-4 {
-    flex-grow: 0;
-    flex-basis: 33.3333333333%;
-    max-width: 33.3333333333%;
-  }
-  .ec-grid__item--xl-5 {
-    flex-grow: 0;
-    flex-basis: 41.6666666667%;
-    max-width: 41.6666666667%;
-  }
-  .ec-grid__item--xl-6 {
-    flex-grow: 0;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-  .ec-grid__item--xl-7 {
-    flex-grow: 0;
-    flex-basis: 58.3333333333%;
-    max-width: 58.3333333333%;
-  }
-  .ec-grid__item--xl-8 {
-    flex-grow: 0;
-    flex-basis: 66.6666666667%;
-    max-width: 66.6666666667%;
-  }
-  .ec-grid__item--xl-9 {
-    flex-grow: 0;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-  .ec-grid__item--xl-10 {
-    flex-grow: 0;
-    flex-basis: 83.3333333333%;
-    max-width: 83.3333333333%;
-  }
-  .ec-grid__item--xl-11 {
-    flex-grow: 0;
-    flex-basis: 91.6666666667%;
-    max-width: 91.6666666667%;
-  }
-  .ec-grid__item--xl-12 {
-    flex-grow: 0;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-.ec-grid--xl > .ec-grid__item {
-  padding-block: calc(to-rem(24) / 2);
-  padding-inline: calc(to-rem(24) / 2);
-}
-.ec-grid--xl > .ec-grid__item--xl-1 {
-  flex-grow: 0;
-  flex-basis: 8.3333333333%;
-  max-width: 8.3333333333%;
-}
-.ec-grid--xl > .ec-grid__item--xl-2 {
-  flex-grow: 0;
-  flex-basis: 16.6666666667%;
-  max-width: 16.6666666667%;
-}
-.ec-grid--xl > .ec-grid__item--xl-3 {
-  flex-grow: 0;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.ec-grid--xl > .ec-grid__item--xl-4 {
-  flex-grow: 0;
-  flex-basis: 33.3333333333%;
-  max-width: 33.3333333333%;
-}
-.ec-grid--xl > .ec-grid__item--xl-5 {
-  flex-grow: 0;
-  flex-basis: 41.6666666667%;
-  max-width: 41.6666666667%;
-}
-.ec-grid--xl > .ec-grid__item--xl-6 {
-  flex-grow: 0;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.ec-grid--xl > .ec-grid__item--xl-7 {
-  flex-grow: 0;
-  flex-basis: 58.3333333333%;
-  max-width: 58.3333333333%;
-}
-.ec-grid--xl > .ec-grid__item--xl-8 {
-  flex-grow: 0;
-  flex-basis: 66.6666666667%;
-  max-width: 66.6666666667%;
-}
-.ec-grid--xl > .ec-grid__item--xl-9 {
-  flex-grow: 0;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.ec-grid--xl > .ec-grid__item--xl-10 {
-  flex-grow: 0;
-  flex-basis: 83.3333333333%;
-  max-width: 83.3333333333%;
-}
-.ec-grid--xl > .ec-grid__item--xl-11 {
-  flex-grow: 0;
-  flex-basis: 91.6666666667%;
-  max-width: 91.6666666667%;
-}
-.ec-grid--xl > .ec-grid__item--xl-12 {
-  flex-grow: 0;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-@media screen and (min-width: to-em(1600)) {
-  .ec-grid__item {
-    padding-block: calc(to-rem(24) / 2);
-    padding-inline: calc(to-rem(24) / 2);
-  }
-  .ec-grid__item--xxl-1 {
-    flex-grow: 0;
-    flex-basis: 8.3333333333%;
-    max-width: 8.3333333333%;
-  }
-  .ec-grid__item--xxl-2 {
-    flex-grow: 0;
-    flex-basis: 16.6666666667%;
-    max-width: 16.6666666667%;
-  }
-  .ec-grid__item--xxl-3 {
-    flex-grow: 0;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-  .ec-grid__item--xxl-4 {
-    flex-grow: 0;
-    flex-basis: 33.3333333333%;
-    max-width: 33.3333333333%;
-  }
-  .ec-grid__item--xxl-5 {
-    flex-grow: 0;
-    flex-basis: 41.6666666667%;
-    max-width: 41.6666666667%;
-  }
-  .ec-grid__item--xxl-6 {
-    flex-grow: 0;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-  .ec-grid__item--xxl-7 {
-    flex-grow: 0;
-    flex-basis: 58.3333333333%;
-    max-width: 58.3333333333%;
-  }
-  .ec-grid__item--xxl-8 {
-    flex-grow: 0;
-    flex-basis: 66.6666666667%;
-    max-width: 66.6666666667%;
-  }
-  .ec-grid__item--xxl-9 {
-    flex-grow: 0;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-  .ec-grid__item--xxl-10 {
-    flex-grow: 0;
-    flex-basis: 83.3333333333%;
-    max-width: 83.3333333333%;
-  }
-  .ec-grid__item--xxl-11 {
-    flex-grow: 0;
-    flex-basis: 91.6666666667%;
-    max-width: 91.6666666667%;
-  }
-  .ec-grid__item--xxl-12 {
-    flex-grow: 0;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-.ec-grid--xxl > .ec-grid__item {
-  padding-block: calc(to-rem(24) / 2);
-  padding-inline: calc(to-rem(24) / 2);
-}
-.ec-grid--xxl > .ec-grid__item--xxl-1 {
-  flex-grow: 0;
-  flex-basis: 8.3333333333%;
-  max-width: 8.3333333333%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-2 {
-  flex-grow: 0;
-  flex-basis: 16.6666666667%;
-  max-width: 16.6666666667%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-3 {
-  flex-grow: 0;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-4 {
-  flex-grow: 0;
-  flex-basis: 33.3333333333%;
-  max-width: 33.3333333333%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-5 {
-  flex-grow: 0;
-  flex-basis: 41.6666666667%;
-  max-width: 41.6666666667%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-6 {
-  flex-grow: 0;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-7 {
-  flex-grow: 0;
-  flex-basis: 58.3333333333%;
-  max-width: 58.3333333333%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-8 {
-  flex-grow: 0;
-  flex-basis: 66.6666666667%;
-  max-width: 66.6666666667%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-9 {
-  flex-grow: 0;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-10 {
-  flex-grow: 0;
-  flex-basis: 83.3333333333%;
-  max-width: 83.3333333333%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-11 {
-  flex-grow: 0;
-  flex-basis: 91.6666666667%;
-  max-width: 91.6666666667%;
-}
-.ec-grid--xxl > .ec-grid__item--xxl-12 {
-  flex-grow: 0;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-@media screen and (min-width: to-em(1920)) {
-  .ec-grid__item {
-    padding-block: calc(to-rem(24) / 2);
-    padding-inline: calc(to-rem(24) / 2);
-  }
-  .ec-grid__item--xxxl-1 {
-    flex-grow: 0;
-    flex-basis: 8.3333333333%;
-    max-width: 8.3333333333%;
-  }
-  .ec-grid__item--xxxl-2 {
-    flex-grow: 0;
-    flex-basis: 16.6666666667%;
-    max-width: 16.6666666667%;
-  }
-  .ec-grid__item--xxxl-3 {
-    flex-grow: 0;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-  .ec-grid__item--xxxl-4 {
-    flex-grow: 0;
-    flex-basis: 33.3333333333%;
-    max-width: 33.3333333333%;
-  }
-  .ec-grid__item--xxxl-5 {
-    flex-grow: 0;
-    flex-basis: 41.6666666667%;
-    max-width: 41.6666666667%;
-  }
-  .ec-grid__item--xxxl-6 {
-    flex-grow: 0;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-  .ec-grid__item--xxxl-7 {
-    flex-grow: 0;
-    flex-basis: 58.3333333333%;
-    max-width: 58.3333333333%;
-  }
-  .ec-grid__item--xxxl-8 {
-    flex-grow: 0;
-    flex-basis: 66.6666666667%;
-    max-width: 66.6666666667%;
-  }
-  .ec-grid__item--xxxl-9 {
-    flex-grow: 0;
-    flex-basis: 75%;
-    max-width: 75%;
-  }
-  .ec-grid__item--xxxl-10 {
-    flex-grow: 0;
-    flex-basis: 83.3333333333%;
-    max-width: 83.3333333333%;
-  }
-  .ec-grid__item--xxxl-11 {
-    flex-grow: 0;
-    flex-basis: 91.6666666667%;
-    max-width: 91.6666666667%;
-  }
-  .ec-grid__item--xxxl-12 {
-    flex-grow: 0;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-.ec-grid--xxxl > .ec-grid__item {
-  padding-block: calc(to-rem(24) / 2);
-  padding-inline: calc(to-rem(24) / 2);
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-1 {
-  flex-grow: 0;
-  flex-basis: 8.3333333333%;
-  max-width: 8.3333333333%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-2 {
-  flex-grow: 0;
-  flex-basis: 16.6666666667%;
-  max-width: 16.6666666667%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-3 {
-  flex-grow: 0;
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-4 {
-  flex-grow: 0;
-  flex-basis: 33.3333333333%;
-  max-width: 33.3333333333%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-5 {
-  flex-grow: 0;
-  flex-basis: 41.6666666667%;
-  max-width: 41.6666666667%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-6 {
-  flex-grow: 0;
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-7 {
-  flex-grow: 0;
-  flex-basis: 58.3333333333%;
-  max-width: 58.3333333333%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-8 {
-  flex-grow: 0;
-  flex-basis: 66.6666666667%;
-  max-width: 66.6666666667%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-9 {
-  flex-grow: 0;
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-10 {
-  flex-grow: 0;
-  flex-basis: 83.3333333333%;
-  max-width: 83.3333333333%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-11 {
-  flex-grow: 0;
-  flex-basis: 91.6666666667%;
-  max-width: 91.6666666667%;
-}
-.ec-grid--xxxl > .ec-grid__item--xxxl-12 {
-  flex-grow: 0;
-  flex-basis: 100%;
-  max-width: 100%;
-}
diff --git a/packages/react/src/components/Grid/GridItem.js b/packages/react/src/components/Grid/GridItem.js
index 2021a8d79..a52fd897c 100644
--- a/packages/react/src/components/Grid/GridItem.js
+++ b/packages/react/src/components/Grid/GridItem.js
@@ -1,14 +1,58 @@
 import React from 'react';
+import { css } from '@emotion/react';
 import { Box } from '../Box';
-import classes from './Grid.module.css';
 
-const getClassNames = (breakPoints) =>
-  Object.keys(breakPoints)
-    .filter((key) => !!breakPoints[key])
-    .map((key) => classes[`ec-grid__item--${key}`])
-    .concat(classes['ec-grid__item '])
-    .join(' ');
+const GridItem = ({ xs, md, lg, xl, xxl, children }) => (
+  <Box
+    css={css`
+      @media (max-width: 600px) {
+        ${xs && xs.colSpan && `grid-column: span ${xs.colSpan}`};
+        ${xs && xs.rowSpan && `grid-row: span ${xs.rowSpan}`};
+        ${xs && xs.colStart && `grid-column-start: ${xs.colStart}`};
+        ${xs && xs.colEnd && `grid-column-end: ${xs.colEnd}`};
+        ${xs && xs.rowStart && `grid-row-start: ${xs.rowStart}`};
+        ${xs && xs.rowEnd && `grid-row-end: ${xs.rowEnd}`};
+      }
 
-export const GridItem = ({ xs, sm, md, lg, xl, ...props }) => (
-  <Box className={`${getClassNames({ xs, sm, md, lg, xl })}`} {...props} />
+      @media (min-width: 600px) {
+        ${md && md.colSpan && `grid-column: span ${md.colSpan}`};
+        ${md && md.rowSpan && `grid-row: span ${md.rowSpan}`};
+        ${md && md.colStart && `grid-column-start: ${md.colStart}`};
+        ${md && md.colEnd && `grid-column-end: ${md.colEnd}`};
+        ${md && md.rowStart && `grid-row-start: ${md.rowStart}`};
+        ${md && md.rowEnd && `grid-row-end: ${md.rowEnd}`};
+      }
+
+      @media (min-width: 768px) {
+        ${lg && lg.colSpan && `grid-column: span ${lg.colSpan}`};
+        ${lg && lg.rowSpan && `grid-row: span ${lg.rowSpan}`};
+        ${lg && lg.colStart && `grid-column-start: ${lg.colStart}`};
+        ${lg && lg.colEnd && `grid-column-end: ${lg.colEnd}`};
+        ${lg && lg.rowStart && `grid-row-start: ${lg.rowStart}`};
+        ${lg && lg.rowEnd && `grid-row-end: ${lg.rowEnd}`};
+      }
+
+      @media (min-width: 992px) {
+        ${xl && xl.colSpan && `grid-column: span ${xl.colSpan}`};
+        ${xl && xl.rowSpan && `grid-row: span ${xl.rowSpan}`};
+        ${xl && xl.colStart && `grid-column-start: ${xl.colStart}`};
+        ${xl && xl.colEnd && `grid-column-end: ${xl.colEnd}`};
+        ${xl && xl.rowStart && `grid-row-start: ${xl.rowStart}`};
+        ${xl && xl.rowEnd && `grid-row-end: ${xl.rowEnd}`};
+      }
+
+      @media (min-width: 1200px) {
+        ${xxl && xxl.colSpan && `grid-column: span ${xxl.colSpan}`};
+        ${xxl && xxl.rowSpan && `grid-row: span ${xxl.rowSpan}`};
+        ${xxl && xxl.colStart && `grid-column-start: ${xxl.colStart}`};
+        ${xxl && xxl.colEnd && `grid-column-end: ${xxl.colEnd}`};
+        ${xxl && xxl.rowStart && `grid-row-start: ${xxl.rowStart}`};
+        ${xxl && xxl.rowEnd && `grid-row-end: ${xxl.rowEnd}`};
+      }
+    `}
+  >
+    {children}
+  </Box>
 );
+
+export default GridItem;