Zenn
Open2

Grid Layoutで横並び

CSS
grid
Katsushi OUGIKatsushi OUGI

flexboxのコレと同じことをgridでやりたかった。

.wrapper {
  width: 500px;
  background: grey;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  
  > div {
    background: blue;
    height: 100px;
    width: 100px;
  }
}

grid-template-columns: repeat(auto-fill, 100px) これがむずい。

repeat() は CSS の関数で、トラックリスト内での部分的な繰り返しを表し、繰り返しパターンを示す多数の列や行を、よりコンパクトな形式で記述することができます。

100pxを複数回くりかえす。どれぐらい？
auto-fill は利用可能なスペースに収まるだけの列を自動的に作成する。つまりコンテナの幅に合わせて、100pxの列をできるだけたくさん詰め込んでくれる。

Katsushi OUGIKatsushi OUGI

↑のコードに誤りがあった。結局できていない。

<div class="wrapper">
  <div style="width: 100px;"></div>
  <div style="width: 40px;"></div>
  <div style="width: 200px;"></div>
  <div style="width: 120px;"></div>
  <div style="width: 90px;"></div>
  <div style="width: 30px;"></div>
</div>

.wrapper {
  width: 500px;
  background: grey;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  
  > div {
    background: blue;
    height: 100px;
  }
}

Flexbox の「width をそのまま尊重しつつ wrap する」動きを完全に Grid で再現するのは難しい