0

Код:

.grid_container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: auto;
  border: 1px solid #be3144;
}

button {
  height: 65px;
  width: 80px;
  color: white;
  outline: 1px solid black;
  border: none;
  background: #4d4d4d;
  font-family: Share Tech Mono, monospace;
  font-size: 20px;
  cursor: default;
}
<div class="grid_container">
  <button id="1" value="1">1</button>
  <button id="2" value="2">2</button>
  <button id="3" value="3">3</button>
  <button id="4" value="4">4</button>
  <button id="5" value="5">5</button>
  <button id="6" value="6">6</button>
  <button id="7" value="7">7</button>
  <button id="8" value="8">8</button>
  <button id="9" value="9">9</button>
  <button id="10" value="10">10</button>
</div>

Проблема в том, что расстояние между колонками где-то 20px, хотя по-умолчанию его быть не должно. Я пытался его убрать или изменить с помощью свойств grid-column-gap:2px; и grid-gap, но не получается. Вопрос, откуда взялись эти интервалы и как от них избавиться?

2 ответа 2

2

Ну всё правильно. Вы указали свойством grid-template-columns ширину 1 столбца равным 100px. А элементам, помещённым в эти столбцы, ширину в 80px. Эти 20px и составляют отступ

1
  • Спасибо, нигде не видел этой информации
    – MyNick
    12 авг 2019 в 12:46
1
button {
  width: 98px;
}

тогда отступ станет 2рх

1
  • Спасибо большое!
    – MyNick
    12 авг 2019 в 12:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.