Сделать столбцы калькулятора отображаемыми в качестве примера ⇐ CSS

[Anonymous]

Я пытаюсь создать калькулятор с помощью кода.
Мой калькулятор выглядит иначе, чем тот, что показан на видео.
Вот оригинальный калькулятор;


А вот мой;


Я хочу, чтобы кнопки были выделены в так же, как на видео.

Кто-нибудь знает, как мне сделать свой калькулятор более похожим на тот, что на видео. Есть предложения?
Я хочу, чтобы кнопки на моем калькуляторе были такими же, как в видео.
Вот код;

Код: Выделить всё

button{
width: 100px;
height: 100px;
border-radius: 50px;
border: none;
background-color: hsl(0, 0%, 27%);
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
}

.keys{
display: grid;
grid-timeplate-columns:repeat(4, 1fr);
}









+ 
7 
9 
- 
4 
5 
6 
* 
1 
2 
3 
/ 
0 
. 
 =
 C

Подробнее здесь: https://stackoverflow.com/questions/793 ... as-example