Skip to content

Columns

Controls how many columns are in an element.

Utility Properties

c-1

columns: 1;

c-2

columns: 2;

c-3

columns: 3;

c-4

columns: 4;

c-5

columns: 5;

c-6

columns: 6;

c-7

columns: 7;

c-8

columns: 8;

c-9

columns: 9;

c-10

columns: 10;

c-11

columns: 11;

c-12

columns: 12;

c-13

columns: 13;

c-14

columns: 14;

c-15

columns: 15;

c-16

columns: 16;

This example sets the columns to 4. The c-4 utility divides the content into 4 equal columns.

A

B

C

D

<div class="c-4">
<p class="bg-indigo rad-1 ta-c tc-white p-4">A</p>
<p class="bg-indigo rad-1 ta-c tc-white p-4">B</p>
<p class="bg-indigo rad-1 ta-c tc-white p-4">C</p>
<p class="bg-indigo rad-1 ta-c tc-white p-4">D</p>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:c-*,md:c-*, lg:c-*, and xxl:c-* allows targeting specific utilities in different viewports.

<div class="c-1 md:c-2 ..."></div>
Hover modifiers

Alternatively, you can apply :hover by using h:c-* utility to override elements and change their values when hovering over them.

<div class="c-1 h:c-2 ..."></div>