Layout structure

You can use DHTMLX Layout to build the necessary composition of blocks to arrange parts of your application. There are three common types of layout:

• horizontal layout

This type of layout contains several rows of cells which are placed horizontally.

const layout = new dhx.Layout("layout_container", {                                  
    rows: [
       { header: "The header of the row 1" },
       { header: "The header of the row 2" },
       { header: "The header of the row 3" },
       { header: "The header of the row 4" }
    ]                                        
});

• vertical layout

This type of layout includes a set of columns of cells that are located vertically.

const layout = new dhx.Layout("layout_container", {   
    cols: [
        { header: "The header of the column 1" },
        { header: "The header of the column 2" },
        { header: "The header of the column 3" },
        { header: "The header of the column 4" }
    ]
});

• mixed layout

In this layout type both rows and columns are used, i.e. a row may include several columns and a column may have rows inside.

const layout = new dhx.Layout("layout_container", {   
    rows: [
        {
            cols: [
                {
                    header: "Block 1"                        
                },
                {
                    header: "Block 2"               
                }
            ]
        },
        {
            rows: [
                {
                    header: "Block 3"                                       
                },
                {
                    header: "Block 4"                                                
                }
            ]
        }
    ]
});