How do I make a button span across 2 columns? - css

Question

I'm working on a calculator app, and there are very specific things that I want for it. I want the colors of the buttons to vary and I want the "0" button to span across the two front columns so that the buttons beside it will be the same size as the rest. I think that just looks better. I have tried many things and none of them worked. I created my own button component and here is all the code that I think is necessary to show:
This is my App.js file
return (
<div className='App'>
<div className='calculator'>
<ResultBar />
<div className='row'>
<Button color="#625C5D" symbol="Clear" />
<Button color="#625C5D" symbol="+/-" />
<Button color="#625C5D" symbol="%" />
<Button color="#B04929" symbol="/" />
</div>
<div className='row'>
<Button symbol="7" />
<Button symbol="8" />
<Button symbol="9" />
<Button color="#B04929" symbol="x" />
</div>
<div className='row'>
<Button symbol="4" />
<Button symbol="5" />
<Button symbol="6" />
<Button color="#B04929" symbol="-" />
</div>
<div className='row'>
<Button symbol="1" />
<Button symbol="2" />
<Button symbol="3" />
<Button color="#B04929" symbol="+" />
</div>
<div className='row'>
<Button style={{columnSpan: 2}} symbol="0"/>
<Button symbol="." />
<Button color="#B04929" symbol="=" />
</div>
{/* <div className='display'>
{result ? <span>({result})</span> : '0'}
</div> */}
{/* <div className='keyboard'>
</div> */}
</div>
</div>
);
This is my button component
import "./Button.css";
const Button = ({ symbol, color }) => {
return (
<div style={{ backgroundColor: color }} className="button-styles">
{symbol}
</div>
);
}
export default Button;
And here's the css for the button
.button-styles {
height: 4em;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(229, 143, 82);
color: white;
font-size: 24px;
flex: 1;
margin: 4px;
border-radius: 16px;
}
At first I tried making a classname called button-span-two and added the line
grid-column: span 2;
Then I tried adding a property like symbol and color in the button component to add to the styles that would represent the number of columns to span. I tried using both gridColumn and columnSpan for this. Then I tried making a separate component with its own css file called ButtonSpan that would basically be the same as my button component but with a grid-column property set to 1/3. None of these worked. The calculator stayed the same with each try.