Grid Systems 101
12 columns - each column is 1/12 of the row width.
A solid grid keeps a layout organized even as content changes. This is a short primer on the grid conventions used in Niagara UI templates.
Columns: a 12-column grid is the most common choice because it divides evenly into halves, thirds, and quarters, giving flexible options for different section widths.
Gutters: the space between columns should stay consistent across a page, typically 16 to 24px depending on overall density, so components line up predictably.
Containers: wrap page content in a max-width container (commonly 1200 to 1440px) so lines of text and rows of cards don't stretch uncomfortably wide on large monitors.
Nesting: grids can nest inside a single column, letting a card or sidebar have its own internal grid without breaking the outer layout.
Responsive behavior: a 12-column desktop grid often collapses to 4 columns on mobile, with components spanning more columns as the viewport shrinks.
Once a grid is defined, most spacing and alignment decisions become much faster since components snap to the same underlying structure.