Clear the Empty spaces in /chapter route (#1369)

* design: chapterspage layout

* fix: chapter layout 1244

* fix: chapter layout(change from flex to grid

* Delete .env.development.local

* Delete .env.local

* Update client/src/modules/chapters/pages/chaptersPage.tsx

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>

* Update client/src/modules/chapters/pages/chaptersPage.tsx

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>

* Update client/src/modules/chapters/pages/chaptersPage.tsx

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>

* Update README.md

* fix: chapter layout eslint issue

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>

README.md

@@ -44,7 +44,7 @@ We are using the following tools:
   - [Chakra UI](https://chakra-ui.com/) - simple, modular & accessible UI components for React
   - Functional Components with [Hooks](https://reactjs.org/docs/hooks-intro.html)
 - [Jest](https://jestjs.io/) - for writing unit tests.
-- [Cypress](https://www.cypress.io/) - to check if specific actions are possible to preform in certain scenarios.
+- [Cypress](https://www.cypress.io/) - to check if specific actions are possible to perform in certain scenarios.
 
 For more information and a guide to working on features, go to the [contributing docs](/CONTRIBUTING.md#adding-a-new-feature).
 

client/src/modules/chapters/pages/chaptersPage.tsx

@@ -1,7 +1,7 @@
 import { Heading, VStack, Stack } from '@chakra-ui/layout';
 import { NextPage } from 'next';
 import React from 'react';
-
+import { Grid, GridItem } from '@chakra-ui/react';
 import { ChapterCard } from 'components/ChapterCard';
 import { useChaptersQuery } from 'generated/graphql';
 
@@ -20,16 +20,19 @@ export const ChaptersPage: NextPage = () => {
       </div>
     );
   }
-
   return (
     <VStack>
       <Stack w={['90%', '90%', '60%']} maxW="600px" spacing={3} mt={10} mb={5}>
         <Heading>Chapters: </Heading>
-        {data.chapters.map((chapter) => (
-          <Heading size="md" key={chapter.id}>
-            <ChapterCard key={chapter.id} chapter={chapter} />
-          </Heading>
-        ))}
+        <Grid mt="5%" templateColumns="repeat(2, 1fr)" columnGap="5%">
+          {data.chapters.map((chapter) => (
+            <GridItem key={chapter.id}>
+              <Heading size="md">
+                <ChapterCard chapter={chapter} />
+              </Heading>
+            </GridItem>
+          ))}
+        </Grid>
       </Stack>
     </VStack>
   );