Fluid vs. Fixed vs. Adaptive Grid Implementations

Grids behave differently as viewports expand:

• Fixed Grid: Columns have rigid pixel widths (e.g., exactly 60px). When the screen expands, the content container remains locked at a fixed width (e.g., 1200px) with expanding side margins.
• Fluid Grid: Columns and gutters scale dynamically as a percentage of the total viewport width (e.g., using CSS fr units or %).
• Adaptive Grid: Snaps between predefined fixed grid layouts at specific hardware breakpoints (e.g., 4 columns on mobile, 8 columns on tablet, 12 columns on desktop).