Columns

Class	Style
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.

Breakpoint variant

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 variant

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>