我正在尝试使用CSS网格在CSS中制作一个计算器。我想要一个加号按钮，它占据两行的高度。但是，当我使用height属性时，按钮会从其位置移动，而不是对其高度进行更改。如何使按钮达到两行的高度？这是代码：
.claculator {
display: grid;
margin: 0 auto;
border: 2px solid black;
width: 350px;
height: 400px;
border-radius: 5px;
}
#screen {
height: 70px;
background-color: #e3dede;
margin: 12px 9px;
border-radius: 5px;
}
#funBtns {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 115px;
row-gap: 20px;
grid-template-rows: repeat(5, 1fr);
}
.button {
align-self: end;
justify-self: center;
}
button {
width: 50px;
height: 30px;
background-color: #191a1c;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
transform: translateY(-5px);
transition: 200ms ease-out;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="claculator">
<div id="screen">
<div>
<div id="funBtns">
<div id="acBtn" class="button"><button>AC</button></div>
<div id="clearBtn" class="button"><button>Clear</button></div>
<div id="backBtn" class="button"><button>Back</button></div>
<div id="divide" class="button"><button>/</button></div>
<div id="one" class="button"><button>1</button></div>
<div id="two" class="button"><button>2</button></div>
<div id="three" class="button"><button>3</button></div>
<div id="multiply" class="button"><button>*</button></div>
<div id="four" class="button"><button>4</button></div>
<div id="five" class="button"><button>5</button></div>
<div id="six" class="button"><button>6</button></div>
<div id="subtract" class="button"><button>-</button></div>
<div id="seven" class="button"><button>7</button></div>
<div id="eight" class="button"><button>8</button></div>
<div id="nine" class="button"><button>9</button></div>
<div id="plus" class="button"><button>+</button></div>
<div id="decimal" class="button"><button>.</button></div>
<div id="zero" class="button"><button>0</button></div>
<div id="equal" class="button"><button>=</button></div>
</div>
</div>
</body>
</html>然而，当我使用height属性时，按钮会从其位置偏移，而不是改变其高度
按钮不是网格的直接子级。您可以通过删除包含的div来简化事情：
.claculator {
display: grid;
grid-template-rows: 70px 1fr;
grid-gap: 35px 0;
margin: 0 auto;
border: 2px solid black;
width: 350px;
height: 400px;
border-radius: 5px;
padding: 12px 9px;
}
#screen {
background-color: #e3dede;
border-radius: 5px;
}
#funBtns {
display: grid;
grid-template-columns: repeat(4, 50px);
grid-template-rows: repeat(5, 30px);
grid-gap: 20px 40px;
justify-content: center;
}
button {
background-color: #191a1c;
color: white;
border: none;
border-radius: 5px;
width: 100%;
}
button:hover {
transform: translateY(-5px);
transition: 200ms ease-out;
}
.button-plus {
grid-row: span 2;
}<div class="claculator">
<div id="screen">
</div>
<div id="funBtns">
<button>AC</button>
<button>Clear</button>
<button>Back</button>
<button>/</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="button-plus">+</button>
<button>.</button>
<button>0</button>
<button>=</button>
</div>
</div>