Question

我正在通过freecodecamp尝试制作一个电子计算器，仍然很早，只是试图确保尺寸和布局正确。

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

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

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

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

一旦我更改了css中按钮的height属性，该特定按钮就会折叠为1列，只有1行。

希望这是有道理的，如果没有，这里是codepen：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);
}

因此有五个明确定义的行。它们都具有相同的高度，这是容器中自由空间的相等分布。

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

来自规范：

6.2. Grid Item Sizing

如果网格项具有固有比率或内在大小   相关维度，网格项的大小与align-self: start相同。

如果您希望按钮高25像素，grid-area可以工作，只需在容器级别说：

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

revised codepen

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

1 个答案: