Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 11 Dec 2023 14:16 by ADMIN
Joseph
Created on: 08 Dec 2023 15:12
Category: GridLayout
Type: Feature Request
7
GridLayout responsive grid system

I think there's a lack of features inside the Grid system to handle simple mobile responsive design. Other modern UI frameworks offer breakpoints and column sizes to easily handle the screen size changing.

Material UI:

React Grid component - Material UI (mui.com)

 

Offering multiple breakpoint properties to each grid row would allow for easier responsive design. The below code sets the column span depending on the screen breakpoints defined.

<GridLayout>
    <GridLayoutItem row={1} xs={12} md={6} lg={4}>row content</GridLayoutItem>
    <GridLayoutItem row={2} xs={12} md={6} lg={4}>row content</GridLayoutItem>
    <GridLayoutItem row={3} xs={12} md={6} lg={4}>row content</GridLayoutItem>
</GridLayout>

 

2 comments
ADMIN
Wissam
Posted on: 11 Dec 2023 14:16

Hi, Joseph,

I mistakenly duplicated it with a feature request for the Data Grid while writing a reply. Apologies for that.

Thank you for submitting this feature request for the GridLayout component, we will monitor it closely.

In the meantime as an alternative solution, I would suggest checking the following blog post which demonstrates how to add breakpoints for the GridLayout using the use-breakpoint external library:

If you have any further questions on this matter, please let me know.

Regards,
Wissam
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Joseph
Posted on: 11 Dec 2023 14:05

Does the duplicated item refer to the GridLayout component AND the grid component? I am only seeing the grid component there. Will that work item contains changes for both?

 

Thanks

Create an account Log In
View
Type
Status
Category