0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CSSのgrid-templateではrepeatが使えないかも

Last updated at Posted at 2023-03-27

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

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

作りたいテーブルの表示

GreenShot20230328_005700-Window.png

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-templategrid-template-areas の指定がないこと、repeatが使えていること

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

終わりに

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?