Grid Wiz

Make a CSS Grid framework with custom browser support at the snap of a function.

v1.0.1 | GitHub | npm

Column Size

sm

These sizing class names start when the screen width is at 0px.

.bx--col-sm-1

.bx--col-sm-3

.bx--col-sm-2

.bx--col-sm-2

.bx--col-sm-4

md

These sizing class names start when the screen width is at 672px.

.bx--col-md-1

.bx--col-md-7

.bx--col-md-2

.bx--col-md-6

.bx--col-md-3

.bx--col-md-5

.bx--col-md-4

.bx--col-md-4

.bx--col-md-8

lg

These sizing class names start when the screen width is at 1056px.

.bx--col-lg-1

.bx--col-lg-15

.bx--col-lg-2

.bx--col-lg-14

.bx--col-lg-3

.bx--col-lg-13

.bx--col-lg-4

.bx--col-lg-12

.bx--col-lg-5

.bx--col-lg-11

.bx--col-lg-6

.bx--col-lg-10

.bx--col-lg-7

.bx--col-lg-9

.bx--col-lg-8

.bx--col-lg-8

.bx--col-lg-16

xl

These sizing class names start when the screen width is at 1312px.

.bx--col-xl-1

.bx--col-xl-15

.bx--col-xl-2

.bx--col-xl-14

.bx--col-xl-3

.bx--col-xl-13

.bx--col-xl-4

.bx--col-xl-12

.bx--col-xl-5

.bx--col-xl-11

.bx--col-xl-6

.bx--col-xl-10

.bx--col-xl-7

.bx--col-xl-9

.bx--col-xl-8

.bx--col-xl-8

.bx--col-xl-16

max

These sizing class names start when the screen width is at 1584px.

.bx--col-max-1

.bx--col-max-15

.bx--col-max-2

.bx--col-max-14

.bx--col-max-3

.bx--col-max-13

.bx--col-max-4

.bx--col-max-12

.bx--col-max-5

.bx--col-max-11

.bx--col-max-6

.bx--col-max-10

.bx--col-max-7

.bx--col-max-9

.bx--col-max-8

.bx--col-max-8

.bx--col-max-16

Subgrid

You can add a .bx-- grid or .bx-- row to any col item and children will know how many columns are available.

.bx--col-sm-1

.bx--col-sm-3.bx--row > .bx--col-sm-1

.bx--col-sm-3.bx--row > .bx--col-sm-2

.bx--col-md-1

.bx--col-md-7.bx--row > .bx--col-md-3

.bx--col-md-7.bx--row > .bx--col-md-4

.bx--col-lg-1

.bx--col-lg-15.bx--row > .bx--col-lg-7

.bx--col-lg-15.bx--row > .bx--col-lg-8

.bx--col-xl-1

.bx--col-xl-15.bx--row > .bx--col-xl-7

.bx--col-xl-15.bx--row > .bx--col-xl-8

.bx--col-max-1

.bx--col-max-15.bx--row > .bx--col-max-7

.bx--col-max-15.bx--row > .bx--col-max-8

Offset

The following col items will start at a specific column at the specified breakpoint.

.bx--col-sm-1.bx--offset-sm-3

.bx--col-md-1.bx--offset-md-7

.bx--col-lg-1.bx--offset-lg-15

.bx--col-xl-1.bx--offset-xl-15

.bx--col-max-1.bx--offset-max-15

Hiding

The following col items will not display at the specified breakpoint. We then bring the back by specifying any col size at the next breakpoint.

.bx--col-sm-0.bx--col-md-8

.bx--col-md-0.bx--col-lg-16

.bx--col-lg-0.bx--col-xl-16

.bx--col-xl-0.bx--col-max-16

.bx--col-max-0