cssで横2列縦方向のリストはheightが必要

#flexboxやgridで横2列縦方向のリストは親要素にheightが必要 heightは決め打ちで指定するか、リストの要素が可変の場合はjavascriptなどで値を求める必要があります。 リストの要素が不定の場合に、常に2列で表示させたいケースは多々ありますが、いろいろ調査してみましたがheightの指定は必須のようです。

.grid{
  display:grid;
  height: 840px; //高さを指定しないと折り返しできない
  grid-template-rows:repeat(auto-fit, minmax(200px, 1fr)); // 縦幅
  //縦方向に並べる
  grid-auto-flow: column;
  grid-gap:10px;
}

.grid > .item{
  border-radius: 10px;
  background: #edf;
  padding: 10px;
  text-align: center;
}

<div class="grid">
  <div class="item">
    <img src="http://placehold.it/240x150" alt="" />
    <p>
      1アイテム
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/240x150" alt="" />
    <p>
       2アイテム
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/240x150" alt="" />
    <p>
       3アイテム
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/240x150" alt="" />
    <p>
       4アイテム
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/240x150" alt="" />
    <p>
       5アイテム
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/240x150" alt="" />
    <p>
       6アイテム
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/240x150" alt="" />
    <p>
       7アイテム
    </p>
  </div>

</div>