ZingGrid automatically resizes your columns and changes from row to card layout in smaller browsers. You can also easily switch your grid between the layouts by
layout attribute on the
On This Page
DefaultZingGrid is responsive by default, and changes from row to card layout depending on your screen size. Resize your browser to see the change!
RowForce row layout with
layout="row"attribute on the
CardForce row layout with
layout="card"attribute on the
layout-controls=falseattribute on the
<zing-grid>tag to hide the controls.
Viewport PauseYou can pause the grid from switching layouts with the
viewport-pauseattribute on the
You can set
viewport-pause to keep the current value of
viewport (even on refresh), but resizing the device will not update the attribute
value, thus freezing the breakpoint until you remove the
Viewport StopYou can stop the grid from switching layouts with the
viewport-stopattribute on the
You can set
viewport-stop to remove the viewport attribute completely, which means the viewport process will no longer run on device resize.
Viewport TypesYou can define your own breakpoints with the
viewport-typesattribute on the
zing-gridtag. You will have to style the grid based on the
If you don't add a breakpoint with key mobile, it won't switch between card and row layout-mode automatically. Custom breakpoints replace the defaults does not combine the two.