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>