refactor: fix vertical alignment in the main page

striker-ui/pages/index.tsx

@@ -1,4 +1,5 @@
 import { Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import Anvils from '../components/Anvils';
 import Nodes from '../components/Nodes';
@@ -9,12 +10,64 @@ import Memory from '../components/Memory';
 
 import 'fontsource-roboto';
 
+const useStyles = makeStyles(() => ({
+  grid: {
+    height: '100vh',
+  },
+}));
+
 const Home = (): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <Grid container alignItems="center" justify="space-around">
+      <Grid item xs={3}>
+        <Grid
+          container
+          justify="flex-start"
+          direction="column"
+          className={classes.grid}
+        >
+          <Anvils />
+          <Nodes />
+        </Grid>
+      </Grid>
+      <Grid item xs={5}>
+        <Grid
+          container
+          justify="flex-start"
+          direction="column"
+          className={classes.grid}
+        >
+          <ReplicatedStorage />
+        </Grid>
+      </Grid>
+      <Grid item xs={3}>
+        <Grid
+          container
+          justify="flex-start"
+          direction="column"
+          className={classes.grid}
+        >
+          <SharedStorage />
+          <CPU />
+          <Memory />
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Home;
+
+/*
   return (
     <Grid container alignItems="center" justify="space-around">
       <Grid item xs={3}>
-        <Anvils />
-        <Nodes />
+        <Grid container justify="flex-start" direction="column">
+          <Anvils />
+          <Nodes />
+        </Grid>
       </Grid>
       <Grid item xs={5}>
         <ReplicatedStorage />
@@ -26,6 +79,21 @@ const Home = (): JSX.Element => {
       </Grid>
     </Grid>
   );
-};
 
-export default Home;
+    <>
+      <div>
+        <Grid container justify="flex-start" direction="column">
+          <Anvils />
+          <Nodes />
+        </Grid>
+      </div>
+      <Grid container justify="flex-start" direction="column">
+        <ReplicatedStorage />
+      </Grid>
+      <Grid container justify="flex-start" direction="column">
+        <SharedStorage />
+        <CPU />
+        <Memory />
+      </Grid>
+    </>
+  */