Column Sizing

Column Sizing

Column sizing controls how much of the twelve-column row a region occupies and supports both explicit and automatic layouts.

Core concept

Explain col-1 through col-12, auto-width columns, equal-width columns, and mixed explicit/automatic sizing. Show why the sum of explicit spans affects whether remaining columns fit on the same row.

Using it in a real interface

Use a dashboard header as an example: a logo area, search field, and action area can use different proportions. On mobile, those regions can become full-width without duplicating markup.

Implementation notes

Do not use column numbers simply because they add up to twelve. Consider the actual content inside each region and allow flexible columns when the content needs natural width.