I installed Chakra 2.10 because the latest version does not work with the code. I typed the code exactly as follows but the Chakra UI Grid does not take up the entire screen.
code:
// import { Button, ButtonGroup } from "@chakra-ui/react";
import { Grid, GridItem, Show } from "@chakra-ui/react";
function App() {
// to check Chakra installation
// return <Button colorScheme="blue">Button</Button>;
return (
// On way of doing Grid is the following line
// <Grid templateAreas={`"nav nav" "aside main"`}>
// to make page responsive we need to pass template object for the break points
<Grid
templateAreas={{
base: `"nav" "main"`,
lg: `"nav nav" "aside main"`,
}}
>
<GridItem area="nav" bg="coral">
Nav
</GridItem>
<Show above="lg">
<GridItem area="aside" bg="gold">
Aside
</GridItem>
</Show>
<GridItem area="main" bg="dodgerblue">
Main
</GridItem>
</Grid>
);
}
export default App;
screenshot of the output;
