Uneven tiles in the GRID

Issue

I need help with the tiles I made using GRID. The issue is that the second and third tiles are unevenly positioned in height; they have different heights. The same problem occurs with tiles 4, 5, and 6—they are also unevenly positioned in height relative to their column. What could be the problem?

Result

`<div class="box">
      <div class="item">Плитка 1</div>
      <div class="item">Плитка 2</div>
      <div class="item">Плитка 3</div>
      <div class="item">Плитка 4</div>
      <div class="item">Плитка 5</div>
      <div class="item">Плитка 6</div>
    </div>`




`.box {
        width: 750px;
        height: 360px;
        display: grid;
        grid-template-columns: 44% 32% 24%;
    }

    .item {
      background: #b3b3b3;
      border: 1px solid #000;
      color: #fff;
      padding: 15px;
    }

    .item:first-child {
      grid-row: 1/6;
    }

    .item:nth-child(2){
      background: #898995;
      grid-row: 1/3;
    }
    .item:nth-child(3) {
      background: #898995;
      grid-row: 3/6;
    }

    .item:nth-child(4){
      grid-row: 1/2;
      background: #7a7a7a;
    }
    .item:nth-child(5){
      grid-row: 2/4;
      background: #7a7a7a;
    }
    .item:nth-child(6) {
      grid-row: 4/6;
      background: #7a7a7a;
    }`

https://jsfiddle.net/0u4o7ycw/

Solution

The numbers in grid-row count the lines between the rows. Your first child should be 1/7, because a column with 6 rows has 7 row lines. Then, the second column is 1/4 and 4/7, and the third column is 1/3, 3/5, 5/7.

Answered By - Tim Roberts