Flex 一本で行くは逆に厳しい

CSSが苦手なのでFlex一本で行く！と決めたものの、Flexレイアウトでテーブルを作るのは辛いぞ！とわかってきた
やりたかったのは簡素なテーブルで、Flexで辛かったのは縦も横も幅を合わせたいという部分、Gridレイアウトの紹介記事を見るとGridレイアウトならその部分が簡単になりそうなので試してみました

作りたいテーブルの表示

HTML

<div class="grid">
  <div class="img">img</div>
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
  <div>n</div>
  <div>o</div>
  <div>p</div>
  <div>q</div>
  <div>r</div>
</div>

最終的にできたCSS

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template:
    " . . . ." auto
    " . . . ."
    " . . . ."
    " . . . ."
    " . . . ."
    " . . . ."  / 
    auto 1fr 1fr 1fr
    ;
  column-gap: 4px;
  row-gap: 2px;
}
.img{
  width: 70px;
  height: 154px;
  grid-row: 1 / span 6;
}

div > div{
  border: 1px solid;
  text-align: center;
}

このテーブルは左上から下方向へ順番に配置していきたいので grid-auto-flow: column としています
areasはすべて.で指定されていますが、左上隅はhtmlのほうで.imgクラスを付与してあります

ハマった部分

auto 1fr 1fr 1frの部分を auto repeat(3, 1fr)と書いていた

他の書き方


.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template:
    auto repeat(5, 1fr) / 
    auto repeat(3, 1fr)
    ;
  column-gap: 4px;
  row-gap: 2px;
}

.grid以外はそのままなので省略していますが、ちゃんとあります
先ほどとの違いはgrid-templateにgrid-template-areas の指定がないこと、repeatが使えていること

先にこちらの書き方で正常に表示されたことを確認していて、その後に-areasを明示した書き方に変更しようとして上記のハマりに遭遇しました

終わりに

今回はグリッドレイアウトのgrid-templateでハマった部分について、原因はrepeat関数が意図せず動いてないということでした。