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.
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.
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.
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.
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.