Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Masonry Grid</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="bg-slate-50 dark:bg-slate-900 min-h-screen p-4 md:p-8"> <div class="max-w-7xl mx-auto"> <h2 class="text-2xl font-bold text-slate-800 dark:text-white mb-8">CSS Columns Masonry</h2> <!-- CSS Columns based masonry (works purely with CSS) --> <div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-6 space-y-6"> <div class="break-inside-avoid bg-indigo-50 dark:bg-indigo-900/20 rounded-xl p-6 border border-indigo-100 dark:border-indigo-800/50 relative overflow-hidden group"> <div class="h-32 bg-indigo-200 dark:bg-indigo-800/50 rounded-lg mb-4"></div> <h3 class="font-bold text-indigo-900 dark:text-indigo-300 text-lg mb-2">Item One</h3> <p class="text-indigo-700/80 dark:text-indigo-400/80 text-sm">Short content block using columns-3 for layout.</p> </div> <div class="break-inside-avoid bg-emerald-50 dark:bg-emerald-900/20 rounded-xl p-6 border border-emerald-100 dark:border-emerald-800/50"> <div class="h-64 bg-emerald-200 dark:bg-emerald-800/50 rounded-lg mb-4"></div> <h3 class="font-bold text-emerald-900 dark:text-emerald-300 text-lg mb-2">Item Two</h3> <p class="text-emerald-700/80 dark:text-emerald-400/80 text-sm">A much taller content block. Notice how the break-inside-avoid utility prevents the browser from splitting this card across columns.</p> </div> <div class="break-inside-avoid bg-rose-50 dark:bg-rose-900/20 rounded-xl p-6 border border-rose-100 dark:border-rose-800/50"> <div class="h-48 bg-rose-200 dark:bg-rose-800/50 rounded-lg mb-4"></div> <h3 class="font-bold text-rose-900 dark:text-rose-300 text-lg mb-2">Item Three</h3> <p class="text-rose-700/80 dark:text-rose-400/80 text-sm">Medium height card sitting naturally in the column flow.</p> </div> <div class="break-inside-avoid bg-amber-50 dark:bg-amber-900/20 rounded-xl p-6 border border-amber-100 dark:border-amber-800/50"> <div class="h-24 bg-amber-200 dark:bg-amber-800/50 rounded-lg mb-4"></div> <h3 class="font-bold text-amber-900 dark:text-amber-300 text-lg mb-2">Item Four</h3> <p class="text-amber-700/80 dark:text-amber-400/80 text-sm">Very short block.</p> </div> <div class="break-inside-avoid bg-blue-50 dark:bg-blue-900/20 rounded-xl p-6 border border-blue-100 dark:border-blue-800/50"> <div class="h-72 bg-blue-200 dark:bg-blue-800/50 rounded-lg mb-4"></div> <h3 class="font-bold text-blue-900 dark:text-blue-300 text-lg mb-2">Item Five</h3> <p class="text-blue-700/80 dark:text-blue-400/80 text-sm">Tallest card in the grid to demonstrate the masonry flow going from top-to-bottom, left-to-right natively.</p> </div> <!-- More items to fill columns --> <div class="break-inside-avoid bg-fuchsia-50 dark:bg-fuchsia-900/20 rounded-xl p-6 border border-fuchsia-100 dark:border-fuchsia-800/50"> <div class="h-40 bg-fuchsia-200 dark:bg-fuchsia-800/50 rounded-lg mb-4"></div> </div> <div class="break-inside-avoid bg-cyan-50 dark:bg-cyan-900/20 rounded-xl p-6 border border-cyan-100 dark:border-cyan-800/50"> <div class="h-32 bg-cyan-200 dark:bg-cyan-800/50 rounded-lg mb-4"></div> </div> </div> </div> </div> </body> </html>
