Grid vinay

src/App.jsx

@@ -6,31 +6,30 @@ import "./App.scss";
 import Container from "./Components/Layout/Container/Container";
 import Typography from "./Components/Data Display/Typography/Typography";
 import TextField from "./Components/Inputs/TextField/TextField";
-import Media from "./Components/Layout/Media/Media";
-
-
+import GridSpacing from './Components/Layout/Grid/GridSpacing';
+import Media from "./Components/Layout/Media/Media"
 
 function App() {
   return (
     <div className="App">
-
-      <Typography variant="h1">Zapify</Typography>
-      <Box color="boxPrimary" p={2} m={2.5} />
-      <Box color="boxSecondary" p={2} m={2.5} />
-      <Box color="boxTertiary" p={2} m={2.5} />
-      <Box color="darkPrimary" p={2} m={2.5} />
-      <Box color="darkSecondary" p={2} m={2.5} />
-      <Box color="darkTertiary" p={2} m={2.5} />
-      <Box color="disabled" p={2} m={2.5} />
-      <Button color="primaryButton">Button</Button>
-      <TextField>Input</TextField>
-      <Container type="fluid" maxWidth="sm" />
-      <Container type="fluid" maxWidth="md" />
-      <Container type="fluid" maxWidth="xl" />
-      <Container type="fixed" />
-      <Media typeGet = "linear">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Media>
-
-
+        <Typography variant="h1">Zapify</Typography>
+        <Box color="boxPrimary" p={2} m={2.5} />
+        <Box color="boxSecondary" p={2} m={2.5} />
+        <Box color="boxTertiary" p={2} m={2.5} />
+        <Box color="darkPrimary" p={2} m={2.5} />
+        <Box color="darkSecondary" p={2} m={2.5} />
+        <Box color="darkTertiary" p={2} m={2.5} />
+        <Box color="disabled" p={2} m={2.5} />
+        <GridSpacing nBox={4} m={3}>hbscdjhb</GridSpacing>
+        <GridSpacing nBox={3} m={3}>fsafvcsda</GridSpacing>
+        <GridSpacing nBox={5} m={3}>VCSADFw</GridSpacing>
+        <Button color="primaryButton">Button</Button>
+        <TextField>Input</TextField>
+        <Container type="fluid" maxWidth="sm" />
+        <Container type="fluid" maxWidth="md" />
+        <Container type="fluid" maxWidth="xl" />
+        <Container type="fixed" />
+        <Media typeGet = "linear"/>
     </div>
   );
 }

src/Components/Inputs/Buttons/Buttons.jsx

@@ -6,7 +6,7 @@ import "./buttonStyles.scss";
 export default class Button extends Component {
   render() {
     return (
-      <a href className={`${this.props.color} `}>
+      <a href className={`${this.props.color}`}>
         <Typography> {this.props.children}</Typography>
       </a>
     );

src/Components/Layout/Box/Box.jsx

@@ -23,7 +23,7 @@ export default class Box extends Component {
   }
 }
 
-Box.propType = {
+Box.propTypes = {
   color: Proptypes.string,
   p: Proptypes.number,
   m: Proptypes.number