Grid Column Start or End
The Telerik and Kendo UI Grid Column Start or End Utilities are CSS utility classes that enable you to control the start and end position of the grid item by contributing a grid line.
| Utility Class | CSS Property |
|---|---|
.k-col-start-1 | grid-column-start: 1; |
.k-col-start-2 | grid-column-start: 2; |
.k-col-start-3 | grid-column-start: 3; |
.k-col-start-4 | grid-column-start: 4; |
.k-col-start-5 | grid-column-start: 5; |
.k-col-start-6 | grid-column-start: 6; |
.k-col-start-7 | grid-column-start: 7; |
.k-col-start-8 | grid-column-start: 8; |
.k-col-start-9 | grid-column-start: 9; |
.k-col-start-10 | grid-column-start: 10; |
.k-col-start-11 | grid-column-start: 11; |
.k-col-start-12 | grid-column-start: 12; |
.k-col-start-13 | grid-column-start: 13; |
.k-col-start-auto | grid-column-start: auto; |
.k-col-span-1 | grid-column: span 1 / span 1; |
.k-col-span-2 | grid-column-span: span 2 / span 2; |
.k-col-span-3 | grid-column-span: span 3 / span 3; |
.k-col-span-4 | grid-column-start: span 4 / span 4; |
.k-col-span-5 | grid-column-start: span 5 / span 5; |
.k-col-span-6 | grid-column-start: span 6 / span 6; |
.k-col-span-7 | grid-column-start: span 7 / span 7; |
.k-col-span-8 | grid-column-start: span 8 / span 8; |
.k-col-span-9 | grid-column-start: span 9 / span 9; |
.k-col-span-10 | grid-column-start: span 10 / span 10; |
.k-col-span-11 | grid-column-start: span 11 / span 11; |
.k-col-span-12 | grid-column-start: span 12 / span 12; |
.k-col-span-full | grid-column: 1 / -1; |
.k-col-span-auto | grid-column: auto; |
.k-col-end-1 | grid-column-end: 1; |
.k-col-end-2 | grid-column-end: 2; |
.k-col-end-3 | grid-column-end: 3; |
.k-col-end-4 | grid-column-end: 4; |
.k-col-end-5 | grid-column-end: 5; |
.k-col-end-6 | grid-column-end: 6; |
.k-col-end-7 | grid-column-end: 7; |
.k-col-end-8 | grid-column-end: 8; |
.k-col-end-9 | grid-column-end: 9; |
.k-col-end-10 | grid-column-end: 10; |
.k-col-end-11 | grid-column-end: 11; |
.k-col-end-12 | grid-column-end: 12; |
.k-col-end-13 | grid-column-end: 13; |
.k-col-end-auto | grid-column-end: auto; |
Number
Use the k-col-start-{n} utility to start and k-col-end-{n} to end the grid item on the number grid line within the column.
Auto
Use the k-col-start-auto utility to apply the initial start position of the grid item.
