MasonryをやめてCSSのcolumnにした
投稿日:
不具合連続のMasonry
2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、
主な不具合は、
・画像と画像が重なる
・ブラウザを縮小したり拡大したりすると表示がおかしくなる
調べてみた結果、
読み込まれていない画像はレイアウトを崩して、要素が重なってしまうことがあるが「imagesLoaded プラグイン」を使うことによりこれを解決できるということで、
「imagesLoaded プラグイン」というのも設置して、jsファイルの記述も変更してみたのですが、結局うまくいかなかった。
何かが間違っているのかいろいろ調べてみましたが、、、。
残念ながら挫折しました。
そこで、cssに頼るしかない!っていうことで、
cssの「column」を使うことで、それっぽく簡単にできました!
超簡単にMasonry風に出来た!
まず、<div>
でも<ui>
でもかまいませんが、全体を囲んでその中に要素を入れていきます。
<div class="grid"> <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div> <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div> <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div> <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div> <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div> <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div> </div>
次にcssを記述していきます。
.grid{ width:100%; min-width:100%; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .grid-item{ display: inline-block; margin: 0; padding: 0; break-inside: avoid;
これで完成!
あとは、好みでcssの値を変更して試してみてください。
最初からこの方法で良かった気がします。
関連記事
-
-
WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …
-
-
WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示
【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた①
WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …