nlog

とめどなく流れるよだれ

ウィンドウサイズを可変しても常に要素で敷き詰める（余白をつくらない）グリッドレイアウト

css

f:id:namikuguri:20180213230410p:plain

今回は以下の記事を参考にして「ウィンドウサイズを可変しても常に要素で敷き詰める（余白をつくらない）グリッドレイアウト」をつくる。

つくったやつはこんな動きになる。

デモはこちら。

コードでポイントになるのは grid-template-columns の指定。auto-fit でウィンドウサイズに合わせて一行に出すグリッドセルの数を変化させてる。

.grid {
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  ...
}

あと、サムネイルの指定にも注目。サイズにバラツキがある画像でも枠に余りの部分がでないようにしてる。とくに頑張ってないので単純に object-fit がすごい。

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: calc((100vw / 2) * var(--negRatio));
  overflow: hidden;
}

.thumb__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

まだできてないこと

ウィンドウサイズを変えたときにサムネイルの比率が変わっちゃんだよな... 。変わらないようにしたい。.thumb につけてる height の指定を変えるとよさそうなんだけど、いい感じの指定が思いつかない。

f:id:namikuguri:20180213225312p:plain

参考