Een fluid grid is een lay-out waarin de kolombreedtes als percentages van het scherm zijn ingesteld in plaats van vaste pixelmaten. Omdat elke kolom een deel van de beschikbare breedte opeist, rekt de hele pagina op een groot scherm en krimpt hij op een telefoon zonder dat iemand hem opnieuw tekent. Een kolom op 50 procent blijft de helft van het scherm, of dat scherm nu 360 pixels of 1440 breed is.
De klassieke vergelijking is water tegenover een ijsblokje. Een lay-out met vaste breedte is het ijsblokje: het houdt zijn exacte vorm en loopt of over de rand van een klein glas of laat gaten in een groot glas. Een fluid grid is water: het stroomt in elke beker die het tegenkomt en vult hem. Daarom staan fluid grids in het hart van responsive design, waarbij een lay-out een telefoon, tablet en desktop bedient in plaats van drie aparte sites te bouwen. Het idee gaat terug op het werk van Ethan Marcotte uit 2010, en de rekensom erachter is simpel: doelbreedte gedeeld door contextbreedte geeft het percentage.
Fluid grids regelen het soepele schalen ertussenin, terwijl breakpoints de grotere sprongen doen, zoals drie kolommen samenvouwen tot een. Er is een grens die het waard is om te kennen. Op een heel breed scherm kan pure vloeibaarheid een regel tekst te ver uitrekken om prettig te lezen, dus ontwerpers zetten een maximumbreedte of voegen marges toe. Samen met een mobile-first-aanpak houden fluid grids content leesbaar op elke breedte.
Bij TopDevs bouwen we standaard op fluid grids, zodat de site van een klant goed voelt op een kleine telefoon en een breed scherm zonder dat we een aparte versie per apparaat hoeven te onderhouden.
