Skip to main content Skip to navigation Skip to search

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