Columns

Controls how many columns are in an element.

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;

---

Using breakpoints

Using 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>

Using variants

Using :hover variants such as h:cols-* allows you to override elements and change their values when hovering over them.

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