Webix Layout is a JavaScript widget that describes how other components will be placed on the page. By using Layout, you can divide a page into rows and columns where all other components are placed. The Layout panels are automatically adjusted to the sizes of the widgets inserted into them. DataTable, Tree, Menu, Windows and other UI widgets can be easily integrated into the Layout.

Webix Layout
View demo

Complex layoutView Demo

Any row of this JavaScript widget can contain several columns, wherein a column can be divided into rows. Thus, you can nest one layout into another one.

In-browser ResizingView Demo

You can effortlessly change the size of Layout sections by moving resizing lines in different directions.

Responsive Behaviour

The structure of Webix Layout widget can respond to the changes of window size in 2 modes: views are hidden and can be shown back or views are moved to another part of layout. The behaviour of layout depends on the space that is available right now.

Setting Borders

You can set borders, margins and padding to the columns, rows and blocks of this JavaScript layout.

Ready for Touch Devices

This widget has a native look and feel on modern touch devices such as iPad, iPhone, Android devices.

Easy Styling with CSS

You can fully view Webix Layout with CSS, making it easy to control and customize its appearance.

Windows and Popups