css - グリッド/フレックスを使用して行間で均等にサイズ設定された列

Question

次のスニペットを検討してください。

#container{
  border: solid 1px black;
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
}

<div id="container">
  <div class="row">
    <div class="item">A1111</div>
    <div class="item">B1</div>
    <div class="item">C1</div>
  </div>
  <div class="row">
    <div class="item">A2</div>
    <div class="item">B2222</div>
    <div class="item">C2</div>
  </div>
  <div class="row">
    <div class="item">A3</div>
    <div class="item">B3</div>
    <div class="item">C3333</div>
  </div>  
</div>

最終結果は、すべての行の各項目がその列の最も広い項目の幅である表のような表示になります。

A1111 A2    A3
B1    B2222 B3
C1    C2    C3333

これは素晴らしいことですが、テーブルを行としてレイアウトする必要があります...

A1111 B1    C1
A2    B2222 C2
A3    B3    C3333

display: tableこれを解決しますが、テーブルには間隔、配置などにいくつかの欠点があります。したがって、グリッドとフレックスは魅力的に見えます。

残念ながら、情報を希望どおりにレイアウトする方法がわかりません。

display: gridtoを追加.rowすると、情報の順序が整いますが、同じ列幅は保持されません。

アイテムのコンテンツはさまざまであるため、固定幅を使用することはできず、グリッド/フレックスがページ全体/含まれる幅にまたがることは望ましくありません。