TcHmiGridContainer

The grid container is a layout control that is based directly on the native CSS grid layout of the browser. It allows child controls to be arranged in a grid of rows and columns, with the entire layout configured using a single compact property (GridLayout). Columns and rows are defined using the standardized CSS grid syntax - for example 1fr 1fr for two columns of the same width or 50px max-content 1fr for a mixture of fixed, content-based and flexible sizes.

As the grid container uses the browser's layout engine, the complex JavaScript-based layout calculation of the classic TcHmiGrid is no longer necessary. By default, child controls are automatically placed in the next free cell by the grid algorithm, but can also be specifically assigned to certain cells or even positioned to overlap if required. This makes the configuration significantly leaner and the presentation more performant.

The Grid Container is the recommended choice for most grid-based layouts. The classic TcHmiGrid is still available for existing projects.

Controls that are children of the TcHmiGridContainer can be configured and positioned using their own GridItemLayout attribute.

Server extensions

-

Inheritance hierarchy

TcHmiControl > TcHmiContainerControl > TcHmiGridContainer

Available from version 14.4.17