CSS 网格内的网格大小调整按钮

Question

我正在学习 freecodecamp 并尝试制作一个电子计算器，这还很早，只是想正确调整大小和布局。

我正在为按钮使用 CSS 网格，但在尝试调整按钮大小时遇到问题。

我有一个 javascript 函数，它为要在计算器上显示的每个按钮创建一个 <button> 元素，然后在相应的 css 网格区域中分配属性以匹配网格。

布局和功能完美无缺，当我尝试调整位于第 4 列和第 4 行和第 5 行的 "equals" 按钮时出现问题。

该按钮占用 1 列，但占用网格的 2 行。

一旦我更改 css 中按钮的 height 属性，那个特定按钮就会折叠成 1 列和 1 行。

希望这是有道理的，如果没有，这是代码笔：https://codepen.io/rorschach1234/pen/gxbbgg

和html：

<head>
 <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div class="container">
    <h2 class="top">Electronic Calculator</h2>
    <div class="display">
      <h2>display</h2>
    </div>
    <div class="buttons">
    </div>  
  </div>
</body>

CSS:

$calc-font: 'Orbitron';

.container {
  margin: 5% 33%;
  background: grey;
}

.top { 
  font-family: $calc-font;
  text-align: center;
  padding-top: 5px;
}

.display {
  margin: 3% 5%;
  padding-bottom: 3%;
  background: white;
  text-align: right;
  font-family: $calc-font;
}

.buttons {
  margin: 0 5%;
  padding-bottom: 3%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas: 
    "clearall clearD divide multiply"
    "seven eight nine minus"
    "four five six add"
    "one two three equals"
    "zero zero period equals";    
}

button {
  height: 25px;
}

和javascript：

var btnClasses = ["clearall", "clearD", "divide", "multiply", "seven", "eight", "nine", "minus", "four", "five", "six", "add", "one", "two", "three", "equals", "zero", "period"];

var buttons = ["AC", "CE", "&divide;", "&times;", 7, 8, 9, "&minus;", 4, 5, 6, "+", 1, 2, 3, "=", 0, "."];

/*function creates a button and then adds the corresponding grid-area to match the grid-template-areas layout in CSS*/

function createButtons() {
  for (var i = 0; i<btnClasses.length; i++) {
    $(".buttons").append("<button class=\"" + btnClasses[i] + "\">" + buttons[i] + "</button>");
    $("." + btnClasses[i]).css("grid-area", btnClasses[i]);
    $("." + btnClasses[i]).css("font-family", "Orbiton");                          
  };
};

$(document).ready(function() {
  createButtons();
});

感谢任何帮助，谢谢！

Answer 1

键盘中每一行的高度在网格容器中定义：

.buttons {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
}

所以有五个明确定义的行。它们都具有相同的高度，即容器中自由 space 的均匀分布。

但是当您在网格项上设置 height 时，它会自动获得 align-self: start，覆盖您定义的任何 grid-area 大小。

来自规范：

6.2. Grid Item Sizing

If the grid item has an intrinsic ratio or an intrinsic size in the relevant dimension, the grid item is sized as for align-self: start.

如果您希望按钮的高度为 25px，并且 grid-area 可以正常工作，只需在容器级别说：

.buttons {
    display: grid;
    grid-template-rows: repeat(5, 25px);
}

revised codepen

CSS 网格内的网格大小调整按钮

CSS Grid resizing buttons within grid

javascript

html

css

css-grid