Rows and Columns

Rows and Columns

Rows establish the horizontal grid context while columns become the responsive children that occupy portions of that row.

Core concept

Explain .row\'s negative-margin and gutter behavior conceptually, automatic column widths, explicit spans, and wrapping when the twelve-column capacity is exceeded.

Using it in a real interface

Show the difference between several .col elements and explicit col-4 elements. Explain why direct children of a row should normally be columns or elements that behave like columns.

Implementation notes

If spacing looks unexpectedly wide or narrow, inspect the row and its gutter settings before adding random margins. Many layout problems come from misunderstanding the grid\'s spacing model.