ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。

以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみたいに簡単に実装できます。

TailwindCSS Masonry Layout
by Luca Spezzano

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• Tailwind CSSのみを使用してMasonryレイアウトを実装する方法
• 終わりに

はじめに

Masonryレイアウトは、以前は画像ギャラリーに使用されていました。しかし最近では、このレイアウトはユーザーにとって非常に魅力的であるため、記事やプロダクトなどの一覧にも使用されています。

Masonryレイアウトで重要なことは、画像を高品質で非常に美しくすることです。

また、このレイアウトは画像が自動的にレスポンシブ対応になるため、デベロッパーやデザイナーにも高く評価されています。個々の画像サイズを調整する必要はなく、レイアウトが画像の異なるサイズに自動的に適応します。

MasonryレイアウトをCSSで実装できるのか

CSSにはMasonryレイアウトを実装できるプロパティの値（masonry）はありますが、残念ながらブラウザにサポートされていません。
参考: masonryのサポート状況

Masonryのライブラリ

CSSだけでMasonryレイアウトを実装するのは簡単ではないため、デベロッパーはJavaScriptを使用するか、外部ライブラリを使用する必要がありました。
参考: シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js
参考: Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri

しかしCSSの進化とともに、このMasonryレイアウトをCSSだけで実装する例がネット上に増えてきました。この記事では、Tailwind CSSの基本機能を使用して実装する方法を解説します。

Tailwind CSSのみを使用してMasonryレイアウトを実装する方法

Tailwind CSS（最近よく使用されているCSSフレームワークの一つ）だけで実装されたMasonryレイアウトのデモはあまり見かけないと思います。

まずは、デモをご覧ください。
Masonryレイアウトを実装する基本的なスタイルで、簡単にコピペで利用できます。画像はUnsplashからランダムに使用しています。

See the Pen
TailwindCSS Masonry Layout Blog by Luca (@93lucasp)
on CodePen.

MasonryレイアウトをTailwind CSSで実装するコードは、下記の通りです。

Masonryレイアウトに必要なのは、4種類のセレクタだけ。
1つ目は、ラッパーにさまざまなスクリーンサイズ用にカラム数を定義します。デフォルトで2カラム、768pxで3カラム、1024pxで4カラムになります。

2つ目は、各画像に.mb-4で下マージンを与えます。

たった4つのセレクタでMasonryレイアウトを実装できます、すごいですね。
Masonryの基本的なレイアウトとブログ投稿のレイアウトも用意しました。

See the Pen
TailwindCSS Masonry Layout Basic by Luca (@93lucasp)
on CodePen.

ブログ投稿のデモでは、タイトルと著者とタグも表示されます。

See the Pen
TailwindCSS Masonry Layout Blog by Luca (@93lucasp)
on CodePen.

終わりに

レイアウトやエフェクトは外部ライブラリやJavaScriptを使用して「時間を無駄」にするのではなく、CSSで簡単に実装できるのではと考える必要があります。