Column Layouts

col-wrapper

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

col

A few examples:

is-span-2

is-span-3

is-span-1

is-span-2

is-span-4

is-4c

is-6c

is-2c

is-grow

col

is-span-

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

col

is-span-1

is-span-12

for base: 12 cols

is-span-1

is-span-2

is-span-3

is-span-4

is-span-5

is-span-6

is-span-7

is-span-8

is-span-9

is-span-10

is-span-11

is-span-12

col

is-span-1-md

is-span-8-md

for tablet: 8 cols

is-span-1-md

is-span-2-md

is-span-3-md

is-span-4-md

is-span-5-md

is-span-6-md

is-span-7-md

is-span-8-md

col

is-span-1-sm

is-span-6-sm

for landscape: 6 cols

is-span-1-sm

is-span-2-sm

is-span-3-sm

is-span-4-sm

is-span-5-sm

is-span-6-sm

col

is-span-1-xs

is-span-4-xs

for mobile: 4 cols

is-span-1-xs

is-span-2-xs

is-span-3-xs

is-span-4-xs

col

is-1c

is-12c

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

is-1c

is-2c

is-3c

is-4c

is-5c

is-6c

is-7c

is-8c

is-9c

is-10c

is-11c

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

is-aside

col

is-main

main

flex-cols

is-vflex-at-md

col

is-45p

col

grid-cols

col

is-content

col

is-p-responsive

Heading

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

col

grid-cols

is-3col

col

is-p-0

col

grid-cols

is-4col

col

is-p-0

col

grid-cols

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

is-12-8-6-4

grid-column (demo)

u-grid-global

is-3-2-2-1

u-grid-global

is-4-3-2-1

u-grid-autofit

col-for-grid

is-full

u-grid-subgrid