Как выровнять элементы в сетке? - PullRequest
Новая
       36

Как выровнять элементы в сетке?

0 голосов
/ 06 декабря 2018

Как сделать так, чтобы следующие элементы не лезли в пространство grid-column: 1/3;? 

.fild_buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 10px;
}

.btn_number {
  display: block;
  height: 72.5px;
  border: 1px solid #000;
  cursor: pointer;
  font-size: 32px;
}

.btn_reset {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}
<div class="fild_buttons">
  <button class="btn_number  btn_reset" type="button">RESET</button>
  <button class="btn_number  btn_7" type="button">7</button>
  <button class="btn_number  btn_8" type="button">8</button>
  <button class="btn_number  btn_9" type="button">9</button>
  <button class="btn_number  btn_divide " type="button">/</button>
  <button class="btn_number  btn_4" type="button">4</button>
  <button class="btn_number  btn_5" type="button">5</button>
  <button class="btn_number  btn_6" type="button">6</button>
  <button class="btn_number  btn_multiply" type="button">X</button>
  <button class="btn_number  btn_1" type="button">1</button>
  <button class="btn_number  btn_2" type="button">2</button>
  <button class="btn_number  btn_3" type="button">3</button>
  <button class="btn_number  btn_substract" type="button">-</button>
  <button class="btn_number  btn_0" type="button">0</button>
  <button class="btn_number  btn_point" type="button">.</button>
  <button class="btn_number  btn_result" type="button">=</button>
  <button class="btn_number  btn_plus" type="button">+</button>
</div>

Можно ли это сделать, не добавляя сторонние теги в макет и не назначая каждой кнопке свою позицию?Я хочу получить простой дисплей калькулятора с кнопкой сброса в верхнем правом углу

...