Looking to create a layout with 5 boxes? Currently, I have managed to set up the grid structure, but the issue is that there is still some space below the last item in the grid. Below is the styled component for Container:
const Container = styled('div')`
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 2fr 3fr 1fr;
grid-template-rows: 5fr 0.75fr 1fr;
gap: 10px;
& > div {
min-height: 20px;
}
& > .container-live-call {
grid-column: 1 / span 3;
background-color: ${({ theme }) => theme.color.secondary.$100};
}
// More styling code here
`;
<Container>
<div className="container-live-call"></div>
<div className="container-live-call-map"></div>
<div className="container-live-call-info"></div>
<div className="container-live-call-volume"></div>
<div className="container-live-call-voice">
<button onClick={() => setOpen(false)}>Click me to close</button>
</div>
</Container>