JavaScript GridLayout UI widget

The GridLayout widget is designed for precise and effortless positioning of UI components within a grid. You can set your own sizes for grid cells and the number of grid rows and columns. Each UI component can span one or several grid cells.

live demo

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

Easy and precise positioning

Create a grid with any number of rows and columns and place your widgets inside the grid.

Dynamic UI modifications

Add, move, and delete components from the grid. Apart from creating each component individually, you can define schemes for adding dynamic components.

Saving and restoring UI state

GridLayout API also allows saving and restoring the current position of UI widgets within GridLayout.