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

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。 以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみたいに簡単に実装できます。 TailwindCSS Masonry Layout by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSのみを使用してMasonryレイアウトを実装する方法 終わりに はじめに Masonryレイアウトは、以前は画像ギャラリーに使用されていました。しかし最近では、このレイアウトはユーザーにとって非常に魅力

[coliss]

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

[mayumayu_nimolove]

マリリンマソンリーレイアウトを知らない

[toaruR]

Tailwind CSS

[n_tatara]

tailwindcss

[umai_bow]

columnsプロパティだけで高さ揃うんだ・・・。本当に知らなかった・・・。ただこれ最新が上とかはできないね