Columns

Class	Properties
cols-1	columns: 1;
cols-2	columns: 2;
cols-3	columns: 3;
cols-4	columns: 4;
cols-5	columns: 5;
cols-6	columns: 6;
cols-7	columns: 7;
cols-8	columns: 8;
cols-9	columns: 9;
cols-10	columns: 10;
cols-11	columns: 11;
cols-12	columns: 12;
cols-13	columns: 13;
cols-14	columns: 14;
cols-15	columns: 15;
cols-16	columns: 16;

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

A

B

C

D

<div class="cols-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:cols-*,md:cols-*, lg:cols-*, and xxl:cols-* allows targeting specific utilities in different viewports.

<div class="cols-1 md:cols-2 ..."></div>

Hover modifiers

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

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