A fluid grid is a layout where column widths are set as percentages of the screen rather than fixed pixel sizes. Because each column claims a share of the available width, the whole page stretches on a large monitor and contracts on a phone without anyone redrawing it. A column set to 50 percent stays half the screen whether that screen is 360 pixels or 1440.
The classic comparison is water versus an ice cube. A fixed-width layout is the ice cube: it keeps its exact shape and either overflows a small glass or leaves gaps in a big one. A fluid grid is water: it pours into whatever container it meets and fills it. That is why fluid grids sit at the heart of responsive design, letting one layout serve a phone, a tablet and a desktop instead of building three separate sites. The idea goes back to Ethan Marcotte’s 2010 work, and the maths behind it is simple: target width divided by context width gives the percentage.
Fluid grids handle the smooth in-between scaling, while breakpoints handle the bigger jumps, like collapsing three columns into one. There is a limit worth knowing. On a very wide screen, pure fluidity can stretch a line of text too far to read comfortably, so designers cap the width or add margins. Used together with a mobile-first mindset, fluid grids keep content readable at every width.
At TopDevs we build on fluid grids by default, so a client’s site feels right on a small phone and a wide screen without us maintaining a separate version for each.
