не срабатывает grid

Question

Подскажите пож. кто в курсе, почему не срабатывает грид. Знак равно должен растягиваться на 2 клетки. НО, ничего не получается.

.equal {
  grid-column: 4;
  grid-row: 6/8;
}

<!DOCTYPE html>
<html lang="ru">


<body>
  <div class="calculator">
    <div class="item input">
      <form name="form"></form>
      <input name="textview" class="input" type="text" readonly>
    </div>
    <div class="item clear">C</div>
    <div class="item back">&larr;</div>
    <div class="item">+</div>
    <div class="item">-</div>
    <div class="item">&times;</div>
    <div class="item">&divide;</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">(</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">)</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item equal">=</div>
    <div class="item zero">0</div>
    <div class="item">.</div>
  </div>

  <script src="main.js"></script>
</body>

</html>

https://codepen.io/igor-solodownik/pen/KKWvpXb

Answer 1

Потому что высота элемента ограничена .item {height: 60px;}

Сделайте min-height: 60px;

БЛОГ НА HUSL

не срабатывает grid

Ответы (1 шт):