JavaScript Layout UI widget

JavaScript Layout widget from Webix UI library defines how other components are placed on the page. By using Layout you can divide a page into rows and columns where all other components are placed. You can create a draggable border between the components to allows users resize a particular area of your application.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS


The Layout panels are automatically adjusted to the sizes of the widgets inserted into them. JavaScript Table, Tree, Menu and other UI widgets can be easily integrated into the Layout.

Complex Layout

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

In-browser resizing

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

Responsive behaviour

By default, layout elements without fixed dimensions evenly distribute the available space among themselves and can shrink/grow when window size changes. Fixed-sized elements of Webix Layout widget can also respond to the changes of the window size in two modes. The first mode allows to hide some views when there's not enough space to show them. In the second mode views are moved to another part of the layout to fit in the available space.

Setting borders

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

Absolute Layout

By default, when you create a layout for a Webix-based app, you have to define the combination of rows and columns containing particular components. Absolute Layout is an alternative to this approach. It allows you to place Webix widgets into cells with fixed width, height, and position.

Data Layout

Data Layout is intended to simplify the creation of applications with complex data structures. One of its distinctive features is the repeater mode. It allows defining a template that describes the structure of each item of the DataLayout, so you won't have to configure each widget manually.

UI Spacer

You can create empty space in the layout cells vertically or horizontally, if you need to create an indent between the elements or align them in the Layout.

Related articles

Layouts as base for building UI structure

HTML Layouts with Webix

HTML Layouts with Webix

CSS on the Grid-iron: Grid Layouts

CSS on the Grid-iron: Grid Layouts