Clear the Empty spaces in /chapter route

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

@@ -1,8 +1,8 @@
 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';
 
 export const ChaptersPage: NextPage = () => {
@@ -20,16 +20,20 @@ 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>
- ))}
+ <Heading>Chapters: </Heading>
+ <Grid mt="5%" templateColumns="repeat(2, 1fr)" columnGap="5%">
+ {data.chapters.map((chapter) => (
+ <GridItem>
+ <Heading size="md" key={chapter.id}>
+ <ChapterCard key={chapter.id} chapter={chapter} />
+ </Heading>
+ </GridItem>
+ ))} 
+ </Grid>
+ </Stack>
  </Stack>
  </VStack>
  );