Custom Flow Panel

Flow panels as grids

Using flow panels as grid containers has some great visual benefits, so there are custom roles that give the flow panel a custom layout design. These are also mobile responsive, so a grid of four components will automatically resize to single components when the screen size is less than 700px. These roles work best with flow panels because there is no padding conflicts, so the layout looks much cleaner than using column panels.

Grids of 2 components

Giving a flow panel the grid-items-2 or grid-items-2-first-large will place components in columns of two which will resize to single columns when the screen size becomes less than 700px. First large is a style addition that makes the first component twice the size, so it takes up two columns instead of one. This is a nice style change when you want to emphasize the first component e.g. a main chart with smaller charts at the bottom.

Grids of 4 components

Giving a flow panel the grid-items-4 or grid-items-4-first-large will place components in columns of four which will resize to single columns when the screen size becomes less than 700px. First large is a style addition that makes the first component four times the size, so it takes up four columns instead of one. This is a nice style change when you want to emphasize the first component e.g. a main chart with smaller charts at the bottom.