Layout Grid

Demonstration of Kate Template grid system

Note 1:
Current grid purposely doesn't wrapped by container, so you can test 'boxed layout' in action. (You can found it in Kate lab)

Note 2:
Columns of current grid will take 100% of width under 768px

1/2 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum. Maecenas diam odio, commodo et dapibus ut, aliquam et leo

1/2 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum. Maecenas diam odio, commodo et dapibus ut, aliquam et leo

2/3 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum. Maecenas diam odio, commodo et dapibus ut, aliquam et leo. Suspendisse euismod ullamcorper ipsum non feugiat. Phasellus ultricies nisi tempor urna facilisis euismod. Pellentesque lectus purus, placerat eu dolor volutpat, facilisis consequat diam. Sed vehicula accumsan tortor ac posuere

1/3 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante

1/4 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus

3/4 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum. Maecenas diam odio, commodo et dapibus ut, aliquam et leo. Suspendisse euismod ullamcorper ipsum non feugiat. Phasellus ultricies nisi tempor urna facilisis euismod. Pellentesque lectus purus, placerat eu dolor volutpat, facilisis consequat diam

1/6 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft

1/6 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft

1/3 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit

1/3 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit

1/5 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

1/5 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

1/5 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

1/5 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

1/5 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

Fullwidth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum. Maecenas diam odio, commodo et dapibus ut, aliquam et leo. Suspendisse euismod ullamcorper ipsum non feugiat. Phasellus ultricies nisi tempor urna facilisis euismod. Pellentesque lectus purus, placerat eu dolor volutpat, facilisis consequat diam. Sed vehicula accumsan tortor ac posuere

1/6 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

1/6 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

1/6 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

1/6 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

1/6 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

1/6 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

1/2 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum

1/4 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus

1/4 width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus