CSS grid, flex

word-break:break-all;
テーブルを作成し、ボックスサイズで次の行にジャンプするには
画面中央
1)1つのクラスでテーブル全体を上書きします.
2)コンテナで包む.
3)いずれも道具として挙げられている.

<div class="outer">
  <div class="container">
    <div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div class="item">BB</div>
    <div class="item">CC</div>
    <div class="item">DD</div>
    <div class="item">EE</div>
    <div class="item">FF</div>
    <div class="item">GG</div>
    <div class="item">HH</div>
  </div>
</div>

.outer{
display : flex;
justify-content: center;
height : 100vh;//画面垂直
align-items: center;
}
height : 100vh;//画面垂直
//画面中央
.container{
display : grid;
grid-template-columns : 1fr 2fr 1fr;
grid-auto-rows : minmax(100px, auto);
word-break:break-all;
}
word-break:break-all; :テキストを次の行に下げる
テキストの横方向中央揃えはtext-align:centerです.
テキストの縦方向の位置合わせは、余白と塗りつぶしを適切に与えることができます.
.item{
display : flex;
justify-content: center;
align-items: center;
}
同様に、アイテムも上記のように中央に配置されます.