Responsive grid

Many elements of layouts can be made responsive to the width of the container element. The default thresholds in pixels are {xs:0, sm:600, md:960, lg:1280, xl:1920, xxl:2560}.

A specificity of the responsivity of our layouts is that the width taken into account to apply thresholds is the width of each containers and not the width of the full window nor the width of the root container.

All composite components like sections and tabs will render their children inside a 12 columns grid.

The layout.cols property of each child is used to define the size of an element in this grid, this property can be expressed as a simple integer from 1 to 12 or as an object with keys xs/sm/md/lg/xl/xxl. If cols is expressed as an object you can specify only the thresholds where you want the value to change, for example layout: {cols: {md: 6}} signifies that xs and sm will use the default value of 12 while all larger sizes will use 6.

The size of the children in the grid can also be expressed from the parent layout.

By combining cols and sections you can create simple columns layouts.

For more in depth customization of the responsive layout you can use the display parameter given to expressions.

This object can be used in a switch to change the component or any other layout option. For example the verticality of expansion panels might be better suited for smaller screens than the horizontality of tabs.