WordPress(ワードプレス)テーマ「yStandard」上でPinterest風のグリッドデザインをcssへの追記だけで実装できたのでシェアします。
目次
参考にさせていただいたサイト
コチラを参考にしました。
ありがとうございます。
cssに記述した内容とhtml
コピペでいけるcssとhtmlを貼っておきます。
Point
画面サイズ毎に3カラム、2カラム、1カラムと変化
画像サイズに関係無く等間隔に詰めて配置
html
<div class="grid-container"> <div class="grid">ここに画像やテキスト</div> <div class="grid">ここに画像やテキスト</div> <div class="grid">ここに画像やテキスト</div> <div class="grid">ここに画像やテキスト</div> <div class="grid">ここに画像やテキスト</div> <div class="grid">ここに画像やテキスト</div> <div class="grid">ここに画像やテキスト</div> <div class="grid">ここに画像やテキスト</div> <div class="grid">ここに画像やテキスト</div> </div>
Attention
htmlの「< >」部分は全角になっていますので実際に使用する際は半角にしないと動作しません!!
css
/* グリッドデザイン */ @media screen and (min-width: 1200px) { .grid-container { -webkit-column-count: 3; -webkit-column-gap: 15px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 15px; -moz-column-fill: balance !important; column-count: 3; column-gap: 15px; column-fill: auto; } } @media screen and (min-width: 993px) and (max-width: 1199px) { .grid-container { -webkit-column-count: 3; -webkit-column-gap: 15px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 15px; -moz-column-fill: balance !important; column-count: 3; column-gap: 15px; column-fill: auto; } } @media screen and (min-width: 769px) and (max-width: 992px) { .grid-container { -webkit-column-count: 3; -webkit-column-gap: 15px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 15px; -moz-column-fill: balance !important; column-count: 3; column-gap: 15px; column-fill: auto; } } @media screen and (min-width: 481px) and (max-width: 768px) { .grid-container { -webkit-column-count: 2; -webkit-column-gap: 15px; -webkit-column-fill: auto; -moz-column-count: 2; -moz-column-gap: 15px; -moz-column-fill: balance !important; column-count: 2; column-gap: 15px; column-fill: auto; } } @media screen and (max-width: 480px) { .grid-container { -webkit-column-count: 1; -webkit-column-gap: 15px; -webkit-column-fill: auto; -moz-column-count: 1; -moz-column-gap: 15px; -moz-column-fill: balance !important; column-count: 1; column-gap: 15px; column-fill: auto; } } .grid { display: inline-block; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; background:#f6f6f6 !important; padding:1em; margin-right:3px; margin-bottom:15px; font-size:14px; } .grid img{ margin-top:1em; margin-bottom:1em } /* BugFix */ @media screen and (-webkit-min-device-pixel-ratio: 0) { .grid { display: block !important; } }
出来上がり









動作確認を行った環境
全環境の動作確認は行えませんが、最低限(?)確認しました。
MacOS
Safari
Chrome
Windows10Pro
ie
Chrome
iPhone/iPad
Safari
Chrome
動作確認結果
全体的に問題なく作動していました。
ただし上記の環境の中で「Windows10Pro」の「ie」だけは表示崩れを起こしていました。
まとめ
全環境で正確に表示されるように直したいけどやり方もわからないですし、ひとまずChromeとSafariとスマホで動けばいいかな、、、、
フォトギャラリー的なページとか作ってみたいのでそのうちトライします。
当サイトでは試しにプロフィールページで使用してみました。
よかったら見てください。