レスポンシブな CSS Grid Masonry(石積み) Layout
CSS Grid ってすごい♡(Pinterest風のMasonryレイアウト）
前回は幅と高さが同じボックスを並べただけのレイアウトでしたが、今回はPinterest風に高さの違うボックスをタイル状に配置するMasonryレイアウトです。本サイトではDTP制作実績で使用しています。
但し、Masonryレイアウトの場合はレスポンシブ対応としてのメディアクエリが必要です。
smp1
Masonryレイアウト
残念ながら2022年の夏現在 Masonry を実装しているのは Firefox のみだそうです。一応本サイトのコンテンツはSafari、Chromeでのレイアウトの崩れはなかったことを確認しています。そして、もちろんレスポンシブデザインです。
アイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえお
012345678
あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえお
アイウエオ
あかさたな
HTML
<div class="mascontainer">
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0001.jpg" alt="sample 0001" class="top-bottom" /></p>
<p style="font-size: 13px; line-height: 1.4em;">アイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえお</p>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0006.jpg" alt="sample 0002" /></p>
<p style="font-size: 13px; line-height: 1.4em;">012345678</p>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0009.jpg" alt="sample 0003" /></p>
<p style="font-size: 13px; line-height: 1.4em;">あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえお</p>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0007.jpg" alt="sample 0004" /></p>
<p style="font-size: 13px; line-height: 1.4em;">アイウエオ</p>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0008.jpg" alt="sample 0005" /></p>
<p style="font-size: 13px; line-height: 1.4em;">あかさたな</p>
</div>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0001.jpg" alt="sample 0001" class="top-bottom" /></p>
<p style="font-size: 13px; line-height: 1.4em;">アイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえお</p>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0006.jpg" alt="sample 0002" /></p>
<p style="font-size: 13px; line-height: 1.4em;">012345678</p>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0009.jpg" alt="sample 0003" /></p>
<p style="font-size: 13px; line-height: 1.4em;">あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえお</p>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0007.jpg" alt="sample 0004" /></p>
<p style="font-size: 13px; line-height: 1.4em;">アイウエオ</p>
</div>
</div>
<div class="artifactgrid">
<div class="infotext">
<p><img src="/images/method/sample_0008.jpg" alt="sample 0005" /></p>
<p style="font-size: 13px; line-height: 1.4em;">あかさたな</p>
</div>
</div>
</div>
CSS
.mascontainer {
margin: 0 auto;
padding: 5px;
width: 90%;
background-color: #fff;
column-count: 3;
column-gap: 0;
}
@media (max-width: 800px) {
.mascontainer {
column-count: 2;
}
}
@media (max-width: 480px) {
.mascontainer {
column-count: 1;
}
}
.artifactgrid {
padding: 5px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.infotext {
padding: 20px;
background-color: #e0f2f1;
}
.artifactgrid > * {
border-radius: 8px;
}
.infotext {
grid-row-end: span 2;
}
.infotext p {
font-size:13px;
line-height: 18px;
font-family: "M PLUS 1p";
}
Masonry Layout について参考にさせていただいた、とても分かり易い解説をされているサイトをご紹介します。
◎ SiTest 最低限の CSS のみで Masonry のようなグリッドレイアウトを組む方法
https://sitest.jp/blog/?p=11921
◎ coliss Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります
https://coliss.com/articles/build-websites/operation/css/css-masonry-layouts-in-firefox.html