CSS可以實現各種效果，其中之一就是用它來寫計算器。下面我們將介紹如何使用CSS來實現一個計算器。

html, body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.calculator {
display: grid;
grid-template-columns: repeat(4, 75px);
grid-template-rows: repeat(5, 75px);
grid-gap: 5px;
border: 2px solid black;
padding: 10px;
}
.output {
grid-column: 1 / span 4;
background-color: white;
text-align: right;
padding-right: 5px;
font-size: 2em;
}
.button {
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
background-color: white;
}
.button:hover {
background-color: lightgray;
}
.equals {
grid-row: 5 / span 1;
grid-column: 4 / span 1;
}

通過以上代碼，我們創建了一個名為“container”的div容器，用于包含整個計算器。在計算器內部，我們使用了一個名為“calculator”的div容器，使用grid布局來創建按鈕。其中，“output”類用于顯示計算結果，“button”類用于創建按鈕。“equals”類用于指定=號的位置。