features
Menu
Menu

Layouts

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 setting the layout attribute on the <zing-grid> tag.

On This Page

Default

ZingGrid is responsive by default, and changes from row to card layout depending on your screen size. Resize your browser to see the change!
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Row

Force row layout with layout="row" attribute on the <zing-grid> tag.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Card

Force row layout with layout="card" attribute on the <zing-grid> tag.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Controls

Set the layout-controls=false attribute on the <zing-grid> tag to hide the controls.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Viewport Pause

You can pause the grid from switching layouts with the viewport-pause attribute on the zing-grid tag.

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-pause attribute.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Viewport Stop

You can stop the grid from switching layouts with the viewport-stop attribute on the zing-grid tag.

You can set viewport-stop to remove the viewport attribute completely, which means the viewport process will no longer run on device resize.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Viewport Types

You can define your own breakpoints with the viewport-types attribute on the zing-grid tag. You will have to style the grid based on the viewport selector.
CloseCopy Copied
zing-grid[viewport="desktop-large"] {...}

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.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading