Grid
CSS
Grid classes are used to provide structure for content. They can be combined to create application specific layouts.
Classes
CSS Class | Host Element(s) | Type | Description | Required |
---|---|---|---|---|
.clr-col-{1..12} | div | layout | For viewport width < 576px an extra small column that can span from 1 to 12 columns wide. | no |
.clr-col-sm-{1..12} | div | layout | For viewport width >= 576px a small column that can span from 1 to 12 columns wide. | no |
.clr-col-md-{1..12} | div | layout | For viewport width >= 768px a medium column that can span from 1 to 12 columns wide. | no |
.clr-col-lg-{1..12} | div | layout | For viewport width >= 992px a large column that can span from 1 to 12 columns wide. | no |
.clr-col-xl-{1..12} | div | layout | For viewport width >= 1200px an extra-large column that can span from 1 to 12 columns wide. | no |
.clr-row | div | layout | A horizontal group of elements that add up to 12 columns. | no |
.clr-col | div | layout | Automatically divides elements into equal width columns. Can be combined with .clr-col-## for automatic re-sizing. | no |
..clr-col-{1..12}-auto | div | layout | Size the column based on the width of its content. | no |
.clr-row-break | div | layout | Use this after a column to break the following columns onto a new line. | no |
.clr-offset-{sm, md, lg, xl}-{1..11} | div | layout | Combine this with a column class (.clr-col-6) to increase the lolumns left margin by a specific number of columns. | no |
.clr-align-items-{1..12}-start | div | layout | Combine with .clr-row to vertically align columns at the start of the row. | no |
.clr-align-items-{1..12}-center | div | layout | Combine with .clr-row to vertically align columns at the center of the row. | no |
.clr-align-items-{1..12}-end | div | layout | Combine with .clr-row to vertically align columns at the end of the row. | no |
.clr-align-self-{1..12}-start | div | layout | Combine with any .clr-col-* class to vertically align the column at the start of the row. | no |
.clr-align-self-{1..12}-center | div | layout | Combine with any .clr-col-* class to vertically align the column in the center of the row. | no |
.clr-align-self-{1..12}-end | div | layout | Combine with any .clr-col-* class to vertically align the column at the end of the row. | no |
.clr-justify-content-start | div | layout | Combine with .clr-row to horizontally align columns at the start of the row. | no |
.clr-justify-content-center | div | layout | Combine with .clr-row to horizontally align columns in the center of the row. | no |
.clr-justify-content-enbd | div | layout | Combine with .clr-row to horizontally align columns at the end of the row. | no |
.clr-justify-content-around | div | layout | Combine with .clr-row to horizontally align columns with even space around all columns. | no |
.clr-justify-content-between | div | layout | Combine with .clr-row to horizontally align columns with space between all columns from row start to row end. | no |