Layout grid

A fixed grid has columns defined in pixels, which do not move with the size of the screen. A fluid grid uses relative units, its columns adapting to the available width. In responsive design, you generally combine a fluid grid with breakpoints, the structure changing at certain thresholds, from 12 columns to 4 on mobile for example.

12 is the most widespread standard, because it divides into 2, 3, 4 or 6 and covers almost all common layouts. For a simple interface, a landing page or an article, 4 or 6 columns are enough. For a complex interface with many variations, a dashboard or an editor, 16 or 24 columns give finer granularity.

Not necessarily. The grid adapts to the medium and to what you want to present on it. Print has no breakpoints and no variable width, which allows compositions that the screen does not. The principle stays the same: the way it is applied changes.

Design tools, Figma first among them, offer configurable grids that you apply to a template. On the development side, CSS frameworks such as Bootstrap or Tailwind come with their own grids and breakpoints, and CSS Grid lets you build custom ones. Desktop publishing software offers them too, with a similar logic.