使用 CSS 网格时如何确保按钮之间的间距相等？答案

【问题标题】：How to assure equal gap between the buttons when using CSS grid?使用 CSS 网格时如何确保按钮之间的间距相等？
【发布时间】：2020-01-20 13:08:21
【问题描述】：

我将向您展示一张图片，以便您了解我想要实现的目标。我点击了一个表单域，手机上的键盘出现了。键盘上方有 5 行不同的符号，这些符号在键盘上是找不到的。但是你可以看到只有两行可见，第二行不是完全可见，但这不是问题，右侧有一个不可见的滚动条，所以我可以向下滚动并查看其他按钮。

我想用 CSS 网格实现类似的东西，但是由于我需要指定一个高度才能有类似上图的东西，只有一行半可见，宽度和高度之间的差距是不同的。

这是我对 CSS 网格的尝试：

1 和 2 之间的间隙大于 1 和 7 之间的间隙。这是有道理的，因为 Grid 根据容器的大小分配间隙。但是我想知道，有没有办法使所有按钮之间的间隙相等？

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  max-width: 600px;
  height: 110px;
  overflow: auto;
  grid-template-columns: repeat(auto-fill, 50px);
  justify-content: space-between;
  align-items: center;
  grid-gap: 4px;
  border: 1px solid red;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: skyblue;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  border: none;
  outline-color: #00A8EF;
  cursor: pointer;
}

@media screen and (min-width: 37.5em) {
  .grid-container {
    height: auto;
  }
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="boxes.css">
  <title>Boxes</title>
</head>
<body>
  <div class="grid-container">
    <button class="button button1">1</button>
    <button class="button button2">2</button>
    <button class="button button3">3</button>
    <button class="button button4">4</button>
    <button class="button button5">5</button>
    <button class="button button6">6</button>
    <button class="button button7">7</button>
    <button class="button button8">8</button>
    <button class="button button9">9</button>
    <button class="button button10">10</button>
    <button class="button button11">11</button>
  </div>
</body>
</html>

您可以在height: auto 所在的大屏幕上看到，差距是相等的，但在手机上却不是。尝试减小窗口的大小，然后您会看到差距有所不同。

如有任何建议，我将不胜感激。

【问题讨论】：

标签： css css-grid

【解决方案1】：

问题是您在网格父级上设置justify-content: space-between。由于您的网格项目 (50px) 具有固定宽度，因此项目是间距以填充所有剩余的可见空间。您要么需要更改按钮宽度的确定方式，要么处理按钮行之间或右侧的间隙（一旦它们换行）。

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  max-width: 400px;
  height: 110px;
  overflow: auto;
  grid-template-columns: repeat(auto-fill, 50px);
  align-items: center;
  grid-gap: 4px;
  border: 1px solid red;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: skyblue;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  border: none;
  outline-color: #00A8EF;
  cursor: pointer;
}

@media screen and (min-width: 37.5em) {
  .grid-container {
    height: auto;
  }
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="boxes.css">
  <title>Boxes</title>
</head>
<body>
  <div class="grid-container">
    <button class="button button1">1</button>
    <button class="button button2">2</button>
    <button class="button button3">3</button>
    <button class="button button4">4</button>
    <button class="button button5">5</button>
    <button class="button button6">6</button>
    <button class="button button7">7</button>
    <button class="button button8">8</button>
    <button class="button button9">9</button>
    <button class="button button10">10</button>
    <button class="button button11">11</button>
  </div>
</body>
</html>

【讨论】：

确定宽度是指使用calc()？
您必须决定在每个屏幕尺寸的行中填充多少按钮。您可以使用calc() 或百分比作为基本宽度。
问题出在高度上。对于移动设备，我有一个特定尺寸的高度，但在大显示器上，高度设置为auto。我更新了我的问题，你可以看到垂直方向的差距较小，这就是问题所在。在移动设备上，我希望只有六个方格。
好吧，我设法通过在垂直和水平方向设置不同的网格间隙以某种方式解决了这个问题：grid-gap: 9px 4px; 不过，我一直在寻找更好的解决方案。