KendoReact

React GridLayout

  • Ensure hassle-free organization of the different elements in your React application in a grid structure with rows and columns.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.

Overview 

The React GridLayout component allows you to easily arrange its contents into rows and columns in a grid structure. It offers a grid-like system for organizing the content in your app based on the CSS grid layout. You can configure items per row or column, as well as span content across them. The KendoReact GridLayout can help you apply the same basic rules (page structure) across multiple pages throughout your app, ensuring UI consistency. 

See the React GridLayout demo 

React Grid Layout Component

Appearance 

Every grid layout is made of the basic building blocks—rows, columns, gaps and alignment of inner elements. With the KendoReact GridLayout, you get full control over these properties. The goal of the component is to make configuring options like row and column dimensions, gaps between both rows and columns, as well as the horizontal and vertical alignment as easy as possible. 

See the React GridLayout Appearance demo 

React GridLayout Component Layout

Items 

If you’re looking to create a more dynamic page layout that breaks from the standard grid structure with identical modules, you can use the KendoReact GridLayout items feature to join several modules together and break the visual flow. To do that, use the items properties to specify how many and which columns and/or rows you want to be included in each item. 

See the React GridLayout Items demo

React GridLayout Component Items

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.