Responsive Layout & Grid Engine
12-column CSS Grid with responsive spans (.k-col-{1..12}, .k-col-md-*), fluid containers, and flexbox utilities.
12-Column Responsive Grid
1
2
3
4
5
6
7
8
9
10
11
12
.k-col-6 (50%)
.k-col-6 (50%)
.k-col-4 (33.3%)
.k-col-4 (33.3%)
.k-col-4 (33.3%)
.k-col-3 (25%)
.k-col-3 (25%)
.k-col-3 (25%)
.k-col-3 (25%)
.k-col-12.k-col-md-6.k-col-lg-4
.k-col-12.k-col-md-6.k-col-lg-4
.k-col-12.k-col-md-12.k-col-lg-4
Flexbox Alignment & Justify Utilities
Item 1
Item 2
Item 3
.k-flex .k-items-center .k-justify-betweenStart
Center
End
.k-flex .k-items-center .k-justify-center .k-gap-3Usage guide & code sample
Use .k-container with .k-grid and 12-column span classes. Combine breakpoints like .k-col-12.k-col-md-6 for responsive flow.
<div class="k-grid k-gap-4">
<div class="k-col-12 k-col-md-6">Left column</div>
<div class="k-col-12 k-col-md-6">Right column</div>
</div>