How css grid computes row auto height?

Question

In the below snippet, I can not understand how .cell1(orange) height has been computed. Why it is so high? Why it is higher than right column content? How left cells height depends on right column and it's contains height?

header {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 62px auto;
  background: beige;
}

.cell1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background: salmon; 
}

.cell2 {
  grid-column: 1/2;
  grid-row: 2/3;
  background: MediumSpringGreen; 
}

.cell3 {
  grid-row: 1/3;
  grid-column: 2/3;
  background: PeachPuff; 
}

.cell3-1 {
  background: MediumPurple;
  height: 5px;
}

.cell3-2 {
  background: LightSkyBlue;
  height: 10px;
}

.cell3-3 {
  background: Navy;
  height: 30px;
}

<header>
  <div class="cell1">1</div>
  <div class="cell2">2</div>
  <div class="cell3">
    <div class="cell3-1"></div>
    <div class="cell3-2"></div>
    <div class="cell3-3"></div>
  </div>
</header>

Answer 1

Let's start with your title.

How css grid computes row auto height?

auto just means it adapts to the height of the content within it. If the content in an auto row, is 100px tall, the row will be 100px tall.

I can not understand how .cell1(orange) height has been computed. Why it is so high?

Because you have told the first row to be 62px tall here:

  grid-template-rows: 62px auto;

Why it is higher than right column content?

It isn't...but I can see that you might think that.

How left cells height depends on right column and it's contains height?

The right content in the context of the grid is only the .cell-3 div but you have told div to span 2 rows. So it assumes the combined height of .cell- and .cell-2.

The content inside cell-3 does not inherit any of the grid properties and so flows as normal.