There is a CSS Grid Gaps problem 🥹🥹🥹

Question

Well, I have made a second version of my code. I have made a Full screen version of my Calculator and it's working fine but I am wondering Why my big buttons are not looking fit in my calculator, 😐😐😐

My Equal button is looking not so good and I wanna fix it do anyone have any ideas about it. 🥹🥹🥹

I think those button which contains grid-row:2; or grid-column:2; have some problems 🤔

.Calculator spam.equal {
grid-row:span 2;
height:135px;
text-align:center ;
padding-top:50px;
background:#9999cf;

}

.Calculator spam.clear {
grid-column:span 2;
width:135px;
text-align:center ;
background-color:#fad000;
}

.Calculator spam.zero {
grid-column:span 2;
width:135px;
text-align:center ;
background-color:#4035ff;
}

Please take a look at my code so you can understand more better 😊

https://code.sololearn.com/W17GN5n9C86a/?ref=app

Answer 1

I don't know is this what you want, becoz I didn't undersrand your problem fully🤣

But check maybe it is what you want, if no say I'll try to help you😄

https://code.sololearn.com/WdY6qmBTrhBR/?ref=app

Answer 2

Yes. Change the height of the = sign until it looks right. I chose 162px

Answer 3

Chris Coder
Yes I have tried your idea but for some reason the whole row is going to be below 😐
And the rest of my calculator looks worst 😐