CSS Masonry Layout in 2 Minutes (No JS Needed)
You have cards with different content lengths. CSS Grid makes them all the same height per row, leaving ugly empty space. Here's how to fix that with pure CSS. The Problem: Grid = Equal Row Heights With CSS Grid, cards in the same row are forced to the same height: CSS Grid: ┌──────────────┐ ┌──────────────┐ │ Short card │ │ Tall card │ │ │ │ with lots of │ │ (wasted │ │ content that │ │ space!) │ │ fills the │ │ │ │ whole card │ └──────────────┘ └──────────────┘ ┌──────────────┐ ┌──────────────┐ │ Medium card │ │ Tiny │ │ with some │ │ │ │ content │ │ (wasted │ │ │ │ space!) │ └──────────────┘ └──────────────┘ The short card stretches to match its tall neighbor. Wasted space everywhere. Copy this into an HTML file and see it yourself: <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> The Problem </title> <style> body { font-family : system-ui , sans-serif ; padding : 2rem ; background :
Continue reading on Dev.to Webdev
Opens in a new tab
