【WordPress】cssの追記のみでPinterest風のグリッドデザイン

WordPress（ワードプレス）テーマ「yStandard」上でPinterest風のグリッドデザインをcssへの追記だけで実装できたのでシェアします。

1 参考にさせていただいたサイト
2 cssに記述した内容とhtml
- - 2.0.1 html
  - 2.0.2 css
3 出来上がり
4 動作確認を行った環境
- 4.1 動作確認結果
5 まとめ

参考にさせていただいたサイト

コチラを参考にしました。
ありがとうございます。

大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-

CSSのみで実装するPinterest風グリッドレイアウトを作成する | 大阪市天王寺区SOHOホームページ制作 | ...

https://designsupply-web.com/suplog/1862/

今回は、写真共有に特化したSNSでおなじみのPinterestのようなグリッドレイアウトをCSSのみで再現してみたいと思います。このグリッドレイアウトはブログサイトやキュレーションサイトでもよく見かけますので使用機会も多 …

cssに記述した内容とhtml

コピペでいけるcssとhtmlを貼っておきます。

Point

画面サイズ毎に３カラム、２カラム、１カラムと変化

画像サイズに関係無く等間隔に詰めて配置

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;
 }
}