CSS 网格-模板-区域拉伸问题

Question

我做了一个计算器。 为了对齐按钮，我使用了网格模板区域和网格区域。 它应该垂直拉伸相等的按钮，但是它不起作用。 我通过使用覆盖网格和显示区域名称从检查器检查，看起来没有问题，但有问题。 如何垂直拉伸相等的区域？

感谢您抽出宝贵时间。

 * { margin: 0; box-sizing: border-box; } html { font-size: 150%; font-weight: 400; font-family: 'Roboto', sans-serif; line-height: 1.4; } body { display: flex; justify-content: center; align-items: center; background-color: cadetblue; height: 100vh; }.calculator { box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0); }.panel { background-color: olive; color: white; width: 16.25rem; padding: 0.75rem 1rem; text-align: end; }.buttons { display: grid; background-color: pink; grid-gap: 1px; grid-template-columns: repeat(4, auto); grid-template-areas: ". . . ." "seven eight nine equal" "four five six equal" "one two three equal" "clear zero dot equal"; } [data-type="number"]:active, [data-type="operator"]:active { background-color: gray; }.buttons>button { border: none; height: 6vh; }.zero { grid-area: zero; }.one { grid-area: one; }.two { grid-area: two; }.three { grid-area: three; }.four { grid-area: four; }.five { grid-area: five; }.six { grid-area: six; }.seven { grid-area: seven; }.eight { grid-area: eight; }.nine { grid-area: nine; }.equal { grid-area: equal; background-color: yellow; }.clean { grid-area: clear; }.dot { grid-area: dot; }

 <div class="container"> <div class="calculator"> <div class="panel">0</div> <div class="buttons"> <button data-process="minus" data-type="operator">-</button> <button data-process="add" data-type="operator">+</button> <button data-process="multiply" data-type="operator">&times;</button> <button data-process="divide" data-type="operator">&divide;</button> <button class="zero" data-type="number">0</button> <button class="one" data-type="number">1</button> <button class="two" data-type="number">2</button> <button class="three" data-type="number">3</button> <button class="four" data-type="number">4</button> <button class="five" data-type="number">5</button> <button class="six" data-type="number">6</button> <button class="seven" data-type="number">7</button> <button class="eight" data-type="number">8</button> <button class="nine" data-type="number">9</button> <button class="clean" data-type="clean">C</button> <button class="dot" data-type="number">.</button> <button class="equal" data-type="equal">=</button> </div> </div> </div>

Answer 1

高度值固定在它上面。 删除或更改

 .buttons>button {
     height: 6vh;
    }

 * { margin: 0; box-sizing: border-box; } html { font-size: 150%; font-weight: 400; font-family: 'Roboto', sans-serif; line-height: 1.4; } body { display: flex; justify-content: center; align-items: center; background-color: cadetblue; height: 100vh; }.calculator { box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0); }.panel { background-color: olive; color: white; width: 16.25rem; padding: 0.75rem 1rem; text-align: end; }.buttons { display: grid; background-color: pink; grid-gap: 1px; grid-template-columns: repeat(4, auto); grid-template-areas: ". . . ." "seven eight nine equal" "four five six equal" "one two three equal" "clear zero dot equal"; } [data-type="number"]:active, [data-type="operator"]:active { background-color: gray; }.buttons>button { border: none; }.zero { grid-area: zero; }.one { grid-area: one; }.two { grid-area: two; }.three { grid-area: three; }.four { grid-area: four; }.five { grid-area: five; }.six { grid-area: six; }.seven { grid-area: seven; }.eight { grid-area: eight; }.nine { grid-area: nine; }.equal { grid-area: equal; background-color: yellow; }.clean { grid-area: clear; }.dot { grid-area: dot; }

 <div class="container"> <div class="calculator"> <div class="panel">0</div> <div class="buttons"> <button data-process="minus" data-type="operator">-</button> <button data-process="add" data-type="operator">+</button> <button data-process="multiply" data-type="operator">&times;</button> <button data-process="divide" data-type="operator">&divide;</button> <button class="zero" data-type="number">0</button> <button class="one" data-type="number">1</button> <button class="two" data-type="number">2</button> <button class="three" data-type="number">3</button> <button class="four" data-type="number">4</button> <button class="five" data-type="number">5</button> <button class="six" data-type="number">6</button> <button class="seven" data-type="number">7</button> <button class="eight" data-type="number">8</button> <button class="nine" data-type="number">9</button> <button class="clean" data-type="clean">C</button> <button class="dot" data-type="number">.</button> <button class="equal" data-type="equal">=</button> </div> </div> </div>