Column Layouts

col-wrapper

you can use col-wrapper to wrap col elements with combo classes such as cc-span-12, cc-12c, and cc-grow for column-based layouts

col

A few examples:

cc-span-2

cc-span-3

cc-span-1

cc-span-2

cc-span-4

cc-4c

cc-6c

cc-2c

cc-grow

col

cc-span-

the cc-span- classes reference to the closest parent element that has container inline size defined

col

cc-span-1

cc-span-12

for base: 12 cols

cc-span-1

cc-span-2

cc-span-3

cc-span-4

cc-span-5

cc-span-6

cc-span-7

cc-span-8

cc-span-9

cc-span-10

cc-span-11

cc-span-12

col

cc-span-1-md

cc-span-8-md

for tablet: 8 cols

cc-span-1-md

cc-span-2-md

cc-span-3-md

cc-span-4-md

cc-span-5-md

cc-span-6-md

cc-span-7-md

cc-span-8-md

col

cc-span-1-sm

cc-span-6-sm

for landscape: 6 cols

cc-span-1-sm

cc-span-2-sm

cc-span-3-sm

cc-span-4-sm

cc-span-5-sm

cc-span-6-sm

col

cc-span-1-xs

cc-span-4-xs

for mobile: 4 cols

cc-span-1-xs

cc-span-2-xs

cc-span-3-xs

cc-span-4-xs

col

cc-1c

cc-12c

12-column system based just on the parent's width

cc-1c

cc-2c

cc-3c

cc-4c

cc-5c

cc-6c

cc-7c

cc-8c

cc-9c

cc-10c

cc-11c

cc-12c

u-1c

u-12c

equivalent utility classes with only width styles applied

u-1c

u-2c

u-3c

u-4c

u-5c

u-6c

u-7c

u-8c

u-9c

u-10c

u-11c

u-12c

flex-cols

col

cc-aside

col

cc-main

main

flex-cols

cc-vflex-at-md

col

cc-45p

col

grid-cols

col

cc-content

col

cc-p-responsive

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique.

col

grid-cols

cc-3col

col

cc-p-0

col

grid-cols

cc-4col

col

cc-p-0

col

grid-cols

cc-row

Grid Layout Utilities

Advanced The Grid Layout utilities system in S2 is a simplified and improved version of the Grid Utilities by Timothy Ricks.

u-grid-global

cc-12-8-6-4

grid-column (demo)

u-grid-global

cc-3-2-2-1

u-grid-global

cc-4-3-2-1

u-grid-autofit

col-for-grid

cc-full

u-grid-subgrid