After adding a grid layout to a page, the required number of columns needs to be specified in the properties section of the grid panel element. The components added to the grid will then be equally distributed across the rows and columns.
As shown below, if four image components are added to the grid panel, and the number of columns is set to 2, that will create a 2x2 grid.
Like all other layout panels, the horizontal panel is added to the active component or page by means of a single click.
Adding components to the grid layout is still a single click. Simply ensure that you have the grid layout selected, and click on the components you want to add.
The primary difference between the grid layout panel and other panels is the ability to split the components into columns. When the columns are created, the components are inserted into the layout from left to right, top to bottom.
When adding panels as child elements within a layout, always be sure to populate the child elements as well.