Is there a way to click on a grid and have it expand larger in material UI

Question

I have multiple grids showing information, but I thought it would be neat to have the end user click on one of the grids and expands it to view larger. Maybe adding a button on each grid to expand it, but is there a way to just click on the grid to maximize and then minimize.

import React  from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Radio from '@mui/material/Radio';
import Typography from '@mui/material/Typography';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import { TrendLine, Gauge, InfoCard } from '@backstage/core-components';



const PeriodSelector = (children?: React.ReactNode):JSX.Element | null => {
   return (
       <FormControl >
           <FormLabel id="period" title="Trends">Trend Period</FormLabel>
        <RadioGroup
            row
            aria-labelledby="period"
            name="period-radio-buttons-group"
        >
            <FormControlLabel value="today" control={<Radio />} label="today" />
            <FormControlLabel value="week" control={<Radio />} label="week" />
            <FormControlLabel value="month" control={<Radio />} label="month" />
            <FormControlLabel value="year" control={<Radio />} label="year" />
        </RadioGroup>
    </FormControl>
   );
}

// They do not export InfoCard.Props up through the modules.
const StatsInfoCard = (props?:any):JSX.Element | null => {
    return (
        <InfoCard variant={"fullHeight"}  title={props.title} titleTypographyProps={{variant: 'p'}}>
            {props.children}
        </InfoCard>
    );
}

// Again they do not export props from their libraries which is a pain for extensibility and
// typescript safety so I anonymize it.
const StatsTrendCard = (props?:any):JSX.Element | null => {
    return (
        <StatsInfoCard title={props.title}>
            <TrendLine
                data={props.data}
                color={props.color}
                title={props.title} >
            </TrendLine>
        </StatsInfoCard>
    );
}

const StatsGaugeCard = (props?:any):JSX.Element | null => {
    return (
        <StatsInfoCard title={props.title}>
            <Gauge getColor={ () => { return props.color} } fractional={false} {...props} />
        </StatsInfoCard>
    );
}
const TotalCard = (props?:any):JSX.Element | null => {
    return (
        <StatsInfoCard {...props}  >
            <Typography variant="h2" align="center" {...props}>
                {props.value}
            </Typography>
        </StatsInfoCard>
    );
}

export function analysisgrids() {
  return (
      <Box sx={{ flexGrow: 1 }}>
          <Grid container spacing={2}>
              <Grid item xs={12}>
                  <div align="center">
                    <PeriodSelector />
                  </div>
              </Grid>
              <Grid item xs={3}>
                  <StatsTrendCard
                      data={[0.1, 0.5, 0.9, 1.0]}
                      color="red"
                      title="Average build execution time" />
              </Grid>
              <Grid item xs={3}>
                  <StatsTrendCard
                      data={[0.1, 0.5, 0.9, 1.0]}
                      color="green"
                      title="Green Builds per day trend" />
              </Grid>
              <Grid item xs={3}>
                  <StatsTrendCard
                      data={[0.1, 0.5, 0.9, 1.0]}
                      color="black"
                      title="Total Builds per day trend" />

              </Grid>
              <Grid item xs={3}>
                  <StatsTrendCard
                      data={[0.1, 0.5, 0.9, 1.0]}
                      color="purple"
                      title="Total Active Branches" />
              </Grid>
              <Grid item xs={3}>
                <TotalCard title="Total builds" value="234" color="green" unit="" />
              </Grid>
              <Grid item xs={3}>
                  <TotalCard title="Broken build recover time" value="1" unit="hrs" color="purple"/>
              </Grid>
              <Grid item xs={3}>
                  <StatsGaugeCard title="% failed builds" value="50" color="red"/>
              </Grid>
              <Grid item xs={3}>
                  <TotalCard title="Avg Test Execution time" value="21" unit="minutes" color="blue"/>
              </Grid>
          </Grid>
      </Box>
  );
}


export default {
    title: 'demos/staticanalysis',
    component: analysisgrids,
};

I did some digging around material ui page and couldn't find a specific justification on.