Layout

column-span

Setting how elements span across multiple columns.

There are many different types of animals, each with unique characteristics.

No matter what type of animal you are interested in, you will find something interesting and informative here.

Look at some of the most amazing creatures on earth, from spiders to whales!

Examples

Use column-span:all for headings, pull quotes, or media that should break out of a multi-column flow.

<h2 class="column-span:all">    Section heading</h2>

Generated CSS

@layer utilities {    .column-span\:all {        column-span: all    }}

Use column-span:none to keep an element inside the current column.

<p class="column-span:none">    Regular column content</p>

Column spanning only matters in a multi-column formatting context.

<article class="columns:3">    <h2 class="column-span:all">Report</h2>    <p>Column content</p></article>

Apply styles based on different states using selectors and conditional queries.

<h2 class="column-span:none column-span:all@sm column-span:all@print">...</h2>

Moving an element below floating elements instead of floating to the left or right.

Setting the number of columns within the container.