wannabe-jellyfish https://blog.hatena.ne.jp/wannabe-jellyfish/ くらげになりたい。 https://memory-lovers.blog/ 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> <di… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fmemory-lovers.blog%2Fentry%2F2022%2F05%2F08%2F070000" title="ピンタレストっぽいレイアウトをCSS Gridで実装する - くらげになりたい。" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/w/wannabe-jellyfish/20220507/20220507225248.png Hatena Blog https://hatena.blog 2022-05-08 07:00:00 rich https://memory-lovers.blog/entry/2022/05/08/070000 1.0 100%