Макеты пользовательского интерфейса материала: растянуть элементы, чтобы занять контейнер

Question

Привет, у меня есть вопрос, касающийся макета материала и пользовательского интерфейса.

Вот макет, который я пытаюсь реализовать, доска предупреждений ... которая должна быть изменена в соответствии с размером экрана и количеством строки и столбцы для вписывания в область просмотра.

<Container maxWidth="sm" className={classes.root}>
  <TextField
    label="Rows"
    name="rows"
    type="number"
    variant="outlined"
    size="small"
    value={state.rows}
    onChange={event => handleInputChange(event)}
  />
  <TextField
    label="Columns"
    name="columns"
    type="number"
    variant="outlined"
    size="small"
    value={state.columns}
    onChange={event => handleInputChange(event)}
  />
  <Grid container direction="column">
    <Grid container item key={itemIndex} justify="center">
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
    </Grid>
    <Grid container item key={itemIndex} justify="center">
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
    </Grid>
    <Grid container item key={itemIndex} justify="center">
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
      <Grid item>
        <button className="white-square" onClick={() => props.onClick()} />
      </Grid>
    </Grid>
  </Grid>
</Container>

Вот css / jss:

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    '& > *': {
      margin: theme.spacing(1),
      width: '25ch',
    },
  },
}));

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.white-square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

В настоящее время он не центрирован и не занимает контейнер полностью. Это так:

Но я бы хотел, чтобы он занимал весь контейнер и соответственно масштабировал отдельные квадраты. Как мне этого добиться?