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関数が意図せず動いてないということでした。