Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

KendoReact GridLayout Overview

The KendoReact GridLayout component allows you to easily arrange the contents of the component in rows and columns in a grid structure.

It offers grid-layout system with rows and columns. It is based on the CSS Grid Layout where you can configure items per a specific row and column, as well as span content across them.

The GridLayout Component is part of KendoReact, a professional UI components library designed and built from the ground up for React to make developers more productive. To try it out, sign up for a free 30-day trial.

React GridLayout Demo Preview

The following example demonstrates the GridLayout component in action and also showcases other KendoReact componentsthe Calendar, ChipList and Card components. The components are arranged in a grid structure by defining the columns, rows, and gaps between them.

Example
View Source
Edit In Stackblitz  
Change Theme:

Functionality and Features