A grid provides a structure of rows and columns for aligning content. It can be used to position content in easy to understand and maintain manner.
Clarity's grid system work very similar to Bootstrap grid system, and Blazority extends this further to use it easily in your Blazor application.
|
Extra Small |
Small |
Medium |
Large |
Extra Large |
| Grid behavior |
Horizontal |
Collapsed to start, horizontal above breakpoints |
| Container width |
<576px |
≥576px |
≥768px |
≥992px |
≥1200px |
| Class prefix |
.clr-col-
|
.clr-col-sm-
|
.clr-col-md-
|
.clr-col-lg-
|
.clr-col-xl-
|
| Number of columns |
12 |
| Gutter width |
24px (12px on the left and right of column) |
| Nestable |
Yes |
| Offsets |
Yes |
| Column order |
Yes |