欄跨度column-span
Setting how elements span across multiple columns.
Overview
| Class | Declarations |
|---|---|
col-span:value | column-span: value;
|
col-span:all | column-span: all;
|
col-span:none | column-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!
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>