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

问题描述 投票：2回答：1

我要给你看一张照片，这样你就可以看到我想要实现的目标。我轻按一个表单字段，然后出现手机上的键盘。键盘上方有5行，这些行在键盘上找不到不同的符号。但是，如您所见，只有两行可见，第二行不是完全可见，但这不成问题，右侧有一个不可见的滚动条，因此我也可以向下滚动并查看其他按钮。

enter image description here

我想实现与CSS网格相似的功能，但是由于我需要指定高度才能具有类似于上图的图像，因此只能看到一行半，宽度和高度之间的间隙是不同的。

这是我尝试使用CSS网格：

enter image description here

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的大屏幕上看到的那样，间隙是相等的，但是在手机上不是。尝试减小窗口的大小，然后您会发现间隙有所不同。

我将不胜感激。

enter image description here

css css-grid
1个回答
0
投票

问题是您在网格父级上设置了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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.