Column Layouts

col-wrapper

The col-wrapper is designed for wrapping col cc-span-1 to cc-span-12, col cc-1c to cc-12c, and col cc-grow. Here are a few examples:

-span-2

-span-3

-span-1

-span-2

-span-4

-4c

-6c

-2c

-grow

col

cc-span-1

cc-span-12

for base: 12 cols

col

cc-span-1-md

cc-span-8-md

for tablet: 8 cols

col

cc-span-1-sm

cc-span-6-sm

for landscape: 6 cols

col

cc-span-1-xs

cc-span-4-xs

for mobile: 4 cols

col

cc-1c

cc-12c

12 cols at any width

col

cols-layout

col

cc-aside

col

cc-main

main

cols-layout

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 This Grid Layout utilities system is simplified from 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