# IBM Grid

This page is where we test all functionality of the grid. Check out the dev tutorial for a step-by-step guide on how to use it. Source code can be found at on the Github repo.

## Setting a col width

{no classnames}

ibm-col-sm-2

ibm-col-sm-2

ibm-col-sm-2 ibm-col-lg-1

ibm-col-sm-2 ibm-col-lg-15

ibm-col-sm-2 ibm-col-md-2

ibm-col-sm-2 ibm-col-md-2

ibm-col-sm-2 ibm-col-md-2

ibm-col-sm-2 ibm-col-md-2

ibm-col-sm-2 ibm-col-md-2

ibm-col-sm-2 ibm-col-md-4

ibm-col-sm-2 ibm-col-md-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2

ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-4

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-6

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-6

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-8

ibm-col-md-2 ibm-col-lg-2

ibm-col-md-2 ibm-col-lg-2

ibm-col-md-2 ibm-col-lg-2

ibm-col-md-2 ibm-col-lg-2

ibm-col-md-2 ibm-col-lg-2

ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2

ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-10

## Hiding cols

Adjust your screen width smaller and larger to see cols hide and appear.

There should be 4 at sm, 3 at md, and 2 at lg.

ibm-col-sm-0 ibm-col-lg-16

ibm-col-md-0 ibm-col-lg-16

ibm-col-lg-0

ibm-col-sm-0-only

ibm-col-md-0-only

ibm-col-lg-0-only

## Removing padding

ibm-col-full

## Adding extra padding

{no class} > ibm-padding

{no class} > ibm-padding-horizontal

{no class} > ibm-padding-vertical

ibm-col-full > ibm-padding

## Bleeding cols at lg breakpoint

ibm-col-bleed

ibm-col-bleed ibm-col-tall

ibm-col-bleed ibm-col-full

ibm-col-bleed ibm-col-full > ibm-padding

ibm-col-bleed ibm-col-group > ibm-col-sm-2

ibm-col-bleed ibm-col-group > ibm-col-sm-2

ibm-col-sm-2 ibm-col-bleed-left

ibm-col-sm-2 ibm-col-bleed-right

ibm-col-sm-2 ibm-col-bleed-left ibm-col-tall

ibm-col-sm-2 ibm-col-bleed-right ibm-col-tall

ibm-col-sm-2 ibm-col-bleed-left ibm-col-full

ibm-col-sm-2 ibm-col-bleed-right ibm-col-full > ibm-padding

ibm-col-sm-2 ibm-col-bleed-left ibm-col-group > ibm-col-sm-2

ibm-col-sm-2 ibm-col-bleed-left ibm-col-group > ibm-col-sm-2

ibm-col-sm-2 ibm-col-bleed-right ibm-col-group > ibm-col-sm-2

ibm-col-sm-2 ibm-col-bleed-right ibm-col-group > ibm-col-sm-2

## Specifying unit heights

ibm-height-sm-4

ibm-height-sm-16 ibm-height-md-12 ibm-height-lg-8

ibm-height-sm-16 ibm-height-md-12 ibm-height-lg-10 ibm-col-bleed

ibm-height-sm-16 ibm-height-md-12 ibm-height-lg-0 ibm-col-bleed

## Removing Padding and then Reapplying

ibm-col-full

ibm-col-full > ibm-padding

ibm-col-bleed ibm-col-full > ibm-padding

ibm-col-sm-2 ibm-col-bleed-left ibm-col-full > ibm-padding

ibm-col-sm-2 ibm-col-bleed-right ibm-col-full > ibm-padding

## Group cols for Sub Rows/Columns

ibm-col-md-4

ibm-col-md-4 ibm-col-group > {no class}

ibm-col-md-4 ibm-col-group > {no class}

## Complex Group cols for Sub Rows/Columns

ibm-col-md-4 ibm-col-group > ibm-col-sm-1 ibm-col-md-4 ibm-height-md-8 ibm-height-lg-11 ibm-col-bleed-left

ibm-col-md-4 ibm-col-group > ibm-col-sm-3 ibm-col-lg-8 ibm-col-group > ibm-col-sm-3 ibm-col-md-2 ibm-col-group

ibm-col-md-4 ibm-col-group > ibm-col-sm-3 ibm-col-lg-8 ibm-col-group > ibm-col-sm-3 ibm-col-md-2 ibm-col-group

ibm-col-md-4 ibm-col-group > ibm-col-sm-3 ibm-col-lg-8 ibm-col-group > ibm-col-sm-3 ibm-col-md-2

ibm-col-md-4 ibm-height-md-16 ibm-height-lg-33 ibm-col-bleed-right