CSS网格-列和行不适用于所有子元素

Question

如下面的代码所示，我正在为计算器创建一个充满按钮的网格。带有'numkey'类的按钮遵循给定的grid-column和grid-row css，但是带有'bluekey'和'redkey'的按钮在完全相同的上下文中不遵循这些属性。为什么会出现这种情况，以及如何让不响应这些参数的按钮响应?

:root {
--pageBg1: hsl(222, 26%, 31%);
--keypadBg1: hsl(223, 31%, 20%);
--screenBg1: hsl(224, 36%, 15%);
--blueKeyBg1: hsl(225, 21%, 49%);
--blueKeyShadow1: hsl(224, 28%, 35%);
--redKeyBg1: hsl(6, 63%, 50%);
--redKeyShadow1: hsl(6, 70%, 34%);
--numberKeyBg1: hsl(30, 25%, 89%);
--numberKeyShadow1: hsl(28, 16%, 65%);
--textNumberKey1: hsl(221, 14%, 31%);
--textOther1: hsl(0, 0, 100%);
}
.keypad {
background-color: var(--keypadBg1);
margin-top: 20px;
border-radius: 10px;
height: 50vh;
}
#grid {
padding: 15px;
display: grid;
grid-gap: 5%;
height: 100%;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
}

/* number key styling */
.numkey {
background-color: var(--numberKeyShadow1);
border-radius: 5px;
}
.numkey>button {
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color: var(--textNumberKey1);
background-color: var(--numberKeyBg1);
height: 95%;
width: 100%;
padding: 5px;
border-radius: 5px;
font-size: 2.5em;
}
.numkey>button:hover {
background-color: white;
}
.numkey:nth-child(1) {
grid-column: 1/2;
grid-row: 3/4;
}
.numkey:nth-child(2) {
grid-column: 2/3;
grid-row: 3/4;
}
.numkey:nth-child(3) {
grid-column: 3/4;
grid-row: 3/4;
}
.numkey:nth-child(4) {
grid-column: 1/2;
grid-row: 2/3;
}
.numkey:nth-child(5) {
grid-column: 2/3;
grid-row: 2/3;
}
.numkey:nth-child(6) {
grid-column: 3/4;
grid-row: 2/3;
}
.numkey:nth-child(7) {
grid-column: 1/2;
grid-row: 1/2;
}
.numkey:nth-child(8) {
grid-column: 2/3;
grid-row: 1/2;
}
.numkey:nth-child(9) {
grid-column: 3/4;
grid-row: 1/2;
}
.numkey:nth-child(10) {
grid-column: 2/3;
grid-row: 4/5;
}
.numkey:nth-child(11) {
grid-column: 1/2;
grid-row: 4/5;
}
.numkey:nth-child(12) {
grid-column: 3/4;
grid-row: 4/5;
}
.numkey:nth-child(13) {
grid-column: 4/5;
grid-row: 4/5;
}
.numkey:nth-child(14) {
grid-column: 4/5;
grid-row: 3/4;
}
.numkey:nth-child(15) {
grid-column: 4/5;
grid-row: 2/3;
}

/* bluekey styling */
.bluekey {
background-color: var(--blueKeyShadow1);
border-radius: 5px;
}
.bluekey>button {
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color: white;
background-color: var(--blueKeyBg1);
height: 95%;
width: 100%;
padding: 5px;
border-radius: 5px;
font-size: 1.5em;
}
.bluekey>button:hover {
background-color: hsl(225, 29%, 74%);
;
}
.bluekey:nth-child(1) {
grid-column: 4/5;
grid-row: 1/2;
background-color: white;
color: black;
}
.bluekey:nth-child(2) {
grid-column: 1/3;
grid-row: 5/6;
}

/* redkey styling */
.redkey {
background-color: var(--redKeyShadow1);
border-radius: 5px;
}
.redkey>button {
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color: white;
background-color: var(--redKeyBg1);
height: 95%;
width: 100%;
padding: 5px;
border-radius: 5px;
font-size: 1.5em;
}
.redkey:nth-child(1) {
grid-column: 3/5;
grid-row: 5/6;
}

<div class="keypad">
<section id="grid">
<div class="numkey">
<button>1</button>
</div>
<div class="numkey">
<button>2</button>
</div>
<div class="numkey">
<button>3</button>
</div>
<div class="numkey">
<button>4</button>
</div>
<div class="numkey">
<button>5</button>
</div>
<div class="numkey">
<button>6</button>
</div>
<div class="numkey">
<button>7</button>
</div>
<div class="numkey">
<button>8</button>
</div>
<div class="numkey">
<button>9</button>
</div>
<div class="numkey">
<button>0</button>
</div>
<div class="numkey">
<button>.</button>
</div>
<div class="numkey">
<button>/</button>
</div>
<div class="numkey">
<button>x</button>
</div>
<div class="numkey">
<button>-</button>
</div>
<div class="numkey">
<button>+</button>
</div>
<div class="bluekey">
<button>DEL</button>
</div>
<div class="bluekey">
<button>RESET</button>
</div>
<div class="redkey">
<button>=</button>
</div>
</section>
</div>
</div>
</main>

Answer 1

替换这部分CSS

.keypad {
background-color: var(--keypadBg1);
margin-top: 20px;
border-radius: 10px;
height: auto;
}
#grid {
padding: 15px;
display: grid;
grid-gap: 5%;
height: 100%;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
}