くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > css > ピンタレストっぽいレイアウトをCSS Gridで実装する

ピンタレストっぽいレイアウトをCSS Gridで実装する

css

ピンタレストっぽい、高さが違う要素をきれいに並べる方法を探してたら、
GridLayoutで簡易的できるっぽかったので、いろいろ調べたときの備忘録。

このサンプルがわかりやすかった(*´ω｀*)
・Masonry style layout with CSS Grid | by Andy Barefoot | Medium
・CSS Grid Masonry (Step 10)

Masonryなどのライブラリもあるけど、
CSSだけで実現できるのはうれしい(*´ω｀*)

使い方

こんな感じのができる

<div class="grid">
  <div class="item">1</div>
  <div class="item is-h-2">2</div>
  <div class="item">3</div>
  <div class="item is-h-3">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

CSSはこんな感じ。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  grid-auto-rows: 100px;
}

.item {
  background-color: #ffffff;
  padding: 20px;
  color: #ffffff;
  text-align: center;
  background-color: #607D8B;
}

.item.is-h-2 {
  grid-row-end: span 2;
}

.item.is-h-3 {
  grid-row-end: span 3;
}

body {
    background-color: #374046;
}

grid-auto-rows: 100px;

基準の高さを設定し、

grid-row-end: span 2;

で、行数を指定すればOK。

CSSだけだと、要素の高さが動的な場合、いい感じにならない。
そういった場合は、JavaScriptで計算して設定する必要がある。

・Masonry style layout with CSS Grid | by Andy Barefoot | Medium

ただ、この方だと複数列に対応しておらず、
いい感じにしたい場合は、JavaScriptで計算してやる必要がある。。

以上!!

参考にしたサイト様