Как обеспечить одинаковый зазор между кнопками при использовании сетки CSS? - PullRequest
Новая
       7

Как обеспечить одинаковый зазор между кнопками при использовании сетки CSS?

2 голосов
/ 20 января 2020

Я покажу вам фотографию, чтобы вы могли видеть, чего я пытаюсь достичь. Я нажал на поле формы, и на телефоне появляется клавиатура. Над клавиатурой есть 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

1 Ответ

0 голосов
/ 20 января 2020

Проблема в том, что вы устанавливаете 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>
...