
When adding widgets to a group then the size is set to auto by default which means it will fill the width of the group. If you look at the screen shot then you can see spaces between groups and widgets the actual space is set on dashboard>site tab. If you add a third group then it will be placed below as shown below: The dashboard is filled horizontally so if the max size is 27 and you create two groups each 10 wide then they will it side by side as shown below: This is effectively the size of the display page. If you change the width of a group then you will see that it has a maximum size. It is advisable to use multiple groups if possible, rather than one big group, so that the page can dynamically resize on smaller screens. If you shrink the browser, at some point the second group will shift to be below the first, in a column. If you add two groups of width 6, as long as your browser window is wide enough, they will sit alongside each other. Given a group with width 6, if you add six widgets, each with a width of 2, then they will be laid out in two rows – three widgets in each. The layout algorithm of the dashboard always tries to place items as high and to the left as they can within their container – this applies to how groups are positioned on the page, as well as how widgets are positioned in a group. Widgets also have a width which by default is set to auto which means that it will be the width of the group. Group elements have a width in units where,by default, 1 unit =48px wide. The basic element is a widget which are placed in groups. The dashboard layout should be considered as a grid. This video shows you how to create a basic dashboard. The easiest way to become familiar with the various dashboard widgets is to create a dashboard using them. The path can be changed in the settings.js file ui:, Creating a Node-Red Dashboard

You can view dashboards using the same url as node-red admin but with /ui added e.g Note: The dashboard port is the same as the admin port The node-red-dashboard node installs a collection of nodes under the dashboard category. If you are a developer the latest version of the dashboard node provides an api for creating your own dashboard widgets.

More details are available here if needed.

The node-red-dashboard node is installed using menu>manage palette>search node-red-dashboard>install. However the nodes that allow you to do this aren’t part of the core nodes and need to be installed separately. You can create a node-red dashboard for IOT and Home automation and for a myriad of other applications.
