【HTML】【CSS】table タグを使わず table 的な幅、高さ調整をした表を作る

　table は表を表す HTML タグです。これを用いることで次の様な表の同行の中で最も高いマスに合わせた高さ、同列の中で最も広い幅のマスに合わせた幅を持つ表を作れます。

<table>： 表要素 – HTML： HyperText Markup Language ｜ MDN
　table タグは表を作るためには便利ですが HTML タグの示す通りの表以外を作るのには向いていません。そういったそもそも table タグでマークアップすべきではないが、表のようなデザインを作りたい時があります。そういった時には次のように grid を使うことでこれを実現できます。

<div class="grid-root">
  <div>短い文字列</div>
  <div>長い文字列あいうえお</div>
  <div>長い文字列あいうえお</div>
  <div>二行の<br>文字列</div>
</div>

.grid-root {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  > div {
    border: solid 1px;
  }
}

　使っているのは display の grid と grid-template-columns の repeat と max-content です。
　display – CSS： カスケーディングスタイルシート ｜ MDN
グリッド – ウェブ開発を学ぶ ｜ MDN
grid – CSS： カスケーディングスタイルシート ｜ MDN
grid-template-columns – CSS： カスケーディングスタイルシート ｜ MDN
repeat() – CSS： カスケーディングスタイルシート ｜ MDN
　display の grid は水平方向、垂直方向に並んだ何かしらを定義するのに優れた CSS グリッドレイアウトを扱うための宣言です。これによって .grid-root 以下がグリッドレイアウトで並ぶようになります。次いで grid-template-columns で列の総数と各列の幅を定義します。今回はrepeat(2, max-content);としてmax-contentを2列、と定義しています。これにより要素2個毎に折り返しが起き、2×2の表の見た目になります。max-contentは定義した軸内（grid-template-columns 内ならば列）の要素の最大サイズです。これにより、同列の中で最も広い幅のマスに合わせた幅を持つ列ができます。