Grid

Introduction

The Grid control is a layout which positions its child controls in a 12 column flow layout. Its children can be specified to take on a variable amount of columns depending on available screen size. With this control it is possible to achieve flexible layouts and line-breaks for large-, medium- and small-sized screens, such as desktop, tablet, and mobile. The Grid control's width can be percentage- or pixel-based and the spacing between its columns can be set to various pre-defined values.

Examples (Resize to see changes)

Example with various widths and margins on different devices

Several containers change their sizes according to the available screen width. In this example, containers are laid out in a flexible fashion on large and medium screen resolutions. On small resolutions they stack on top of each other. The first grid in this example has a spacing of 0 between its columns while the second one has 1rem.

Form-like example

Typical form layout that adapts according to the available screen width. The Grid provides control over line-breaks. Additional CSS styling like text-alignment and vertical spacing can be added.

Example for indents and order changes

By means of the Grid it is possible to indent containers and to place spacing between them. It is also possible to change the order of containers in one row (without changing the DOM). This behavior again can be set differently for large, medium and small screen resolutions.

Example with flexible tiles

By means of the Grid it is possible to design tile-based layouts. Varying tile sizes and layout behavious can be specified depending on available screen real estates.

API Documentation

See API documentation