暗黙的な行方向のグリッド・トラックを定義する

明示的なグリッドが無い場合に grid-auto-rows: を加える

A（暗黙）
B（暗黙）
<div class="grid">
  <div>A（暗黙）</div>
  <div>B（暗黙）</div>
</div>

grid-template-rows: none; は明示的なグリッドがないことを示す。どの列も暗黙的に生成され、それらのサイズは grid-auto-rows プロパティによって決定される。そこで上図は grid-auto-rows: 100px; を設定した。

grid-template-columns: none; は明示的なグリッドがないことを示す。どの列も暗黙的に生成され、それらのサイズは grid-auto-columns プロパティによって決定される。ここでは、grid-auto-columns の設定は無し。

.grid {
  overflow: auto;
  padding: 16px;
  background: #f4f4f4;
  text-align: center;
  resize: vertical; 
  display: grid;
  grid-template-rows: none;
  grid-template-columns: none;
  grid-auto-flow: row;
  grid-auto-rows: 100px;
  gap: 10px;
}
.grid>div {
  padding: 16px;
  border: 1px solid #666;
  background:rgba(205,133,63,0.8);
  color: #fff;
}