CSS Grid：居中和重叠的困难答案

【问题标题】：CSS Grid: centering and overlapping difficultiesCSS Grid：居中和重叠的困难
【发布时间】：2023-03-25 00:55:01
【问题描述】：

我正在尝试创建一个简单的计算器，仅使用 HTML 和 CSS 进行布局，最终使用纯 JavaScript 进行函数。

我希望网站/页面具有响应性，这就是我使用 CSS Grid 而没有绝对单位的原因； % 和 fr 而不是 px...

计算器本身应该是一个中心正方形网格，按钮中的文本水平和垂直居中，所有按钮都应该适合“计算器”。

<html>
   <body>
      <div class="calc">
        <button id="bp">+&nbsp;/&nbsp;-</button>
        <button id="bc">C</button>
        <button id="bb">X</button>
         <button id="b7">7</button>
         <button id="b8">8</button>
         <button id="b9">9</button>
         <button id="b4">4</button>
         <button id="b5">5</button>
         <button id="b6">6</button>
         <button id="b1">1</button>
         <button id="b2">2</button>
         <button id="b3">3</button>
         <button id="bd">.</button>
         <button id="b0">0</button>
         <button id="be">=</button>
      </div>
   </body>
</html>

div.calc {
   max-width: 80%;
   margin: 1% auto;

   border: 2px solid #111111;
   border-radius: 5px;
   padding: 1%;

    display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-gap: 2%;

    justify-items: center;
    align-items: center; 
}

div.calc > button {
   background-color: lightgrey;
   color: darkblue;

   border: 2px solid #111111;
   border-radius: 5px;

   font-size: 2em;
   cursor: pointer;

   vertical-align: center;
   text-align: center;

   width: 100%;
   height: 0;
   padding: 50%;
}

button#bp,
button#bd {
    background-color: blue;
    color: yellow;
}

button#bc {
    background-color: red;
    color: white;
}

button#bb {
    background-color: yellow;
    color: blue;
}

button#be {
    background-color: green;
    color: yellow;
}

Codepen

计算器的 div 似乎不够高，无法容纳按钮，因此网格的底行重叠并在计算器外流血。

我尝试使用 calc div 的高度（高度：100% ...），但最后一行总是超过...

我似乎无法让按钮内的文本正确居中；尤其是水平的。 '+ / -' 按钮就是一个很好的例子。我已将 text-align 设置为中心，并且 justify-items 和 align-items 都是中心。我知道最后两个是指网格中的按钮项本身。但我看不出还有什么地方可以让文本正确居中。

我希望这是一件非常简单的事情，而我只是一遍又一遍地盯着同一个代码，太长时间了。

如果您不想更正我的代码，而是希望将任何在线示例或解释指向我，我会很乐意做功课。

谢谢！

【问题讨论】：

标签： css css-grid

【解决方案1】：

问题是grid-gap:2%。它适用于水平方向，因为我们可以根据宽度解析 2%，但对于高度它不起作用，因为没有定义高度。基本上，浏览器是先计算没有间隙的高度，然后加上间隙。

您应该考虑使用px 或其他类似vw/vh 的单位。我还更改了您将按钮居中的方式。 (Centering in CSS Grid)

div.calc {
  max-width: 80%;
  margin: 1% auto;
  border: 2px solid #111111;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  
  grid-gap: 1vw;
  padding: 1vw; /*make the padding the same*/
}

div.calc>button {
  background-color: lightgrey;
  color: darkblue;
  border: 2px solid #111111;
  border-radius: 5px;
  font-size: 2em;
  cursor: pointer;
  /*to center*/
  display: flex;
  align-items: center;
  justify-content: center;
  /**/
}
/*keep the ratio*/
div.calc>button:before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}
/**/
button#bp,
button#bd {
  background-color: blue;
  color: yellow;
}

button#bc {
  background-color: red;
  color: white;
}

button#bb {
  background-color: yellow;
  color: blue;
}

button#be {
  background-color: green;
  color: yellow;
}

<div class="calc">
    <button id="bp">+&nbsp;/&nbsp;-</button>
    <button id="bc">C</button>
    <button id="bb">X</button>
    <button id="b7">7</button>
    <button id="b8">8</button>
    <button id="b9">9</button>
    <button id="b4">4</button>
    <button id="b5">5</button>
    <button id="b6">6</button>
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
    <button id="bd">.</button>
    <button id="b0">0</button>
    <button id="be">=</button>
  </div>

【讨论】：

哇，真快！这优雅地解决了我的问题，同时保持一切响应。现在我只需要做更多的阅读来完全掌握你在间隙和填充中使用 vw 以及在网格内使用 flex 和 ::before 比率代码的操作......谢谢！
@DerekErb 基本上 vw 的长度不取决于元素的宽度或高度，因此不会有任何问题，因为浏览器可以轻松解决它。对于 flexbox 的使用，它是众多方法中的一种（按照第一个链接查看所有方法），对于比率，这里是一个很好的链接，可以更好地理解：stackoverflow.com/a/54928586/8620333

【解决方案2】：

带有三列按钮框的flexbox 方法的替代解决方案。我希望这对你有帮助。

* {
    box-sizing: border-box;
    position: relative;
}

div.calc {
    max-width: 80%;
    margin: 1% auto;
    border: 2px solid #111111;
    border-radius: 5px;
    padding: 1%;
    /* display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-gap: 2%;      
	justify-items: center;
	align-items: center;  */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}

div.calc > button {
    background-color: lightgrey;
    color: darkblue;
    border: 2px solid #111111;
    border-radius: 5px;
    font-size: 2em;
    cursor: pointer;
    vertical-align: center;
    text-align: center;
    height: 0;
    padding: 12%;
    flex-grow: 1;
    width: 31%;
    height: 31%;
    margin: 5px;
}

button#bp,
button#bd {
    background-color: blue;
    color: yellow;
}

button#bc {
    background-color: red;
    color: white;
}

button#bb {
    background-color: yellow;
    color: blue;
}

button#be {
    background-color: green;
    color: yellow;
}

<div class="calc">
    <button id="bp">+&nbsp;/&nbsp;-</button>
    <button id="bc">C</button>
    <button id="bb">X</button>
    <button id="b7">7</button>
    <button id="b8">8</button>
    <button id="b9">9</button>
    <button id="b4">4</button>
    <button id="b5">5</button>
    <button id="b6">6</button>
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
    <button id="bd">.</button>
    <button id="b0">0</button>
    <button id="be">=</button>
</div>

【讨论】：