Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Responsive Grid?

See original GitHub issue

Hello ant-design team,

Is the responsiveness subject covered in this library? I am asking this as I could not find any documentation or example and Layout component does not have any prop about it.

Thank you.

Issue Analytics

State:
Created 7 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

9reactions

GrayChoicommented, Aug 5, 2016

https://github.com/ant-design/ant-design/blob/master/components/layout/demo/reponsive.md

Have a look at this link？

0reactions

stevesworkcommented, Jul 4, 2019

Layout.Sider has onBreakpoint and breakpoint props which I use as a workaround to monitor breakpoint changes. This technique is a bit unwieldy most especially when monitoring changes between two or more specific breakpoints but it is quite fast and saves me the trouble of either introducing yet another npm package into the fray or hand-rolling a bespoke solution. At this point, I simply do something along the lines: <Layout.Sider breakpoint="xs" onBreakpoint={broken => setIsInXsWidth(broken)} />. The onBreakpoint handler could also be wrapped in useCallback hook. If ant design has provided a more dedicated solution to this issue as of today, I am yet to become aware of it.