Syntax

Column Span

Setting how elements span across multiple columns.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
col-span:valuecolumn-span: value;
col-span:allcolumn-span: all;
col-span:nonecolumn-span: none;

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!

<div class="cols:3 gap:8x">
<p>There are many different types of animals, ...</p>
<p class="col-span:all font:bold">No matter what type of animal ...</p>
<p>Look at some of the most amazing creatures on earth, ...</p>
</div>

Basic usage

Span across all columns

Use col-span:all to make elements span across all 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!

<div class="cols:3 gap:8x">
<p>There are many different types of animals, ...</p>
<p class="col-span:all font:bold">No matter what type of animal ...</p>
<p>Look at some of the most amazing creatures on earth, ...</p>
</div>

Does not span multiple columns

Use col-span:none to make elements not 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!

<div class="cols:3 gap:8x">
<p>There are many different types of animals, ...</p>
<p class="col-span:none font:bold">No matter what type of animal ...</p>
<p>Look at some of the most amazing creatures on earth, ...</p>
</div>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="col-span:all:hover col-span:all@sm col-span:all@dark col-span:all@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.