Fullwidth content - e.g. hero image, video

H1 page heading inside wide content

Internal grid layout below is based on an existing desktop-first grid system. Now updated to be mobile-first flexbox without changing HTML markup. Fallback to simple 2-col "inline-block" layout.

4-cols with extra grid-item

Can set data-cols-fill="true" on parent grid to automatically handle rows that are incomplete or contain orphans.

Grid item - equal height columns
Grid item
Grid item
Grid item
Grid item

Nested grid

Nested grid item
Nested grid item
Nested grid item
Nested grid item
Nested grid item
Nested grid item

Asymmetric grid

e.g. apply grid-2-wide-left class to parent grid. Ratio is 2:1.

Asymmetric grid item
Asymmetric grid item

Grid items span multiple cols

e.g. apply .g class to grid-item.

".g5" grid item spans 5 cols
".g4" grid item spans 4 cols
".g3" grid item spans 3 cols

Main content2

3-cols with extra grid-item

Grid item - equal height columns
Grid item
Grid item
Grid item

Sidebar

Wide content