Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide.
import "./styles.css";
import Button from '@mui/material/Button';
import Fab from '@mui/material/Fab';
export default function App() {
return (
<div className="App">
<div className = "blank"> </div>
<div className = "btn-container-div">
<div className = "screen-div"> </div>
<div className = "row">
<Fab> AC </Fab>
<Fab> +/- </Fab>
<Fab> % </Fab>
<Fab> ÷ </Fab>
</div>
<div className = "row">
<Fab> 7 </Fab>
<Fab> 8 </Fab>
<Fab> 9 </Fab>
<Fab> × </Fab>
</div>
<div className = "row">
<Fab> 4 </Fab>
<Fab> 5 </Fab>
<Fab> 6 </Fab>
<Fab> ÷ </Fab>
</div>
<div className = "row">
<Fab> AC </Fab>
<Fab> +/- </Fab>
<Fab> % </Fab>
<Fab> − </Fab>
</div>
<div className = "row">
<Fab> 0 </Fab>
<Fab> . </Fab>
<Fab> = </Fab>
</div>
</div>
</div>
);
}.App {
display: grid;
background:black;
height: 150vh;
width: 100vh;
margin: auto;
grid-template-rows: 2fr 10fr;
}
.blank {
background: red;
}
.btn-container-div {
background: blue;
display: grid;
grid-template-rows: repeat(6,1fr);
}
.screen-div {
background: white;
}
.row{
background: black;
display: grid;
grid-template-columns: repeat(4,1fr);
justify-items: center;
}Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide.