Fluid grid is a layout system where widths are relative — typically percentages of the container — so columns grow and shrink as the viewport changes, instead of snapping at a few fixed pixel widths.
It is the skeleton of responsive design. Images, type, and navigation still need their own rules, but if the grid is locked to 960px, phones get pinch-zoom and giant monitors get empty margins. In CSS, Flexbox (one direction) and CSS Grid (rows and columns) are the usual tools. Done well, it helps usability: buttons stay tappable, text doesn’t overflow, and you maintain one codebase instead of a separate “mobile site.”
A real-life example of a fluid grid
A three-column services row on a Decatur clinic site: on a laptop each column is a third; on a phone they stack. Same HTML, different arrangement — like a yoga mat that rolls from studio to suitcase. A fixed 320-pixel column on a 27-inch display is the opposite: a postage stamp in a warehouse.
Start with a max-width container and percentage columns, then test real phones. How-to: Fluid Grids in Responsive Design and Why Your Website Needs Responsive Design.