Layout
columns
Flow content into columns with a chosen count or preferred width.
Overview
| Class | Declarations |
|---|---|
columns:<value> | columns: <value>;
|
Basic usage
Set column count
Use columns:count to flow content through a chosen number of columns. Reading order continues down one column, then into the next.
Set column count
Read down each column, then across to the next. The container grows naturally instead of forcing overflow columns.
<div class="columns:3"> <p>Start with a short introduction to the collection.</p> <p>Continue with the details readers need to compare each option.</p> <p>Finish with a clear next step.</p></div>Flexible multi-column layout
Combine a column count with a preferred width, such as columns:4|100px. The browser fits up to four columns into the available space. The width is a preference, not a strict minimum: a container narrower than one column can still shrink it.
Flexible multi-column layout
Read down each column, then across to the next. The container grows naturally instead of forcing overflow columns.
<div class="columns:4|100px"> <p>Start with a short introduction to the collection.</p> <p>Continue with the details readers need to compare each option.</p> <p>Finish with a clear next step.</p></div>Apply conditionally
Use one column for narrow layouts and introduce more columns when there is enough reading width. Resize this preview past sm to compare the flow. See conditions.
Apply conditionally
Read down each column, then across to the next. The container grows naturally instead of forcing overflow columns.
<div class="columns:1 columns:3@sm"> <p>First part of the story.</p> <p>The next part follows in reading order.</p></div>