--- title: "Layouts | Features" description: "ZingGrid automatically resizes your columns and changes from row to card layout in smaller browsers. Use the default, set row or card mode, or customize Viewports." url: https://www.zinggrid.com/docs/features/layouts --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/features/layouts.md mode: provenance representation: markdown origin_response_id: 324b4abad75219509de5ffabb8cb1618 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.694Z version_nonce: e3edcf6021803651004929278f70cac0 generated_at_utc: 2026-10-31T01:13:14.756Z response_nonce: 5716c2c851acfe2287e6896cfc933b21 ``` # 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 `` tag. ## 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 in the grid below! [Example code](https://app.zingsoft.com/demos/embed/4QWHSX55) ## Row If you don't want ZingGrid to switch between layouts when you resize your screen, you can force a row layout with the `[layout="row"]` attribute on the `` tag (see below). If you don't want users to have the option to toggle between row and card mode at all, add `[layout-controls="disabled"]` to the `` tag. ```html ``` ### Row Layout Grid Here is a complete grid that stays in row layout even when you resize the browser: [Example code](https://app.zingsoft.com/demos/embed/KSWQTLFV) ## Card If you don't want ZingGrid to switch between layouts when you resize your screen, you can force a card layout with the `[layout="card"]` attribute on the `` tag (see below). If you don't want users to have the option to toggle between row and card mode at all, add `layout-controls="disabled"` to the `` tag. ```html ``` ### Card Layout Grid Here is a complete grid that stays in card layout even when you resize the browser: [Example code](https://app.zingsoft.com/demos/embed/S8484RB0) ## Controls To hide the controls that toggle between row mode and card mode, set the `[layout-controls=false]` attribute on the `` tag, like so: ```html ``` ### Disabled Layout Controls Grid Here is a complete grid with the control to toggle between card mode and row mode disabled: [Example code](https://app.zingsoft.com/demos/embed/SJFP26C5) ## Viewport Pause You can also pause the grid from switching layouts with the `viewport-pause` attribute on the ``` tag, like so: ```html ``` > **Note:** 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. [Learn more about viewports here](https://www.zinggrid.com/docs/features/viewport). ### Viewport Paused Grid Here is a complete grid with the viewport paused: [Example code](https://app.zingsoft.com/demos/embed/KKMHFMHN) ## Viewport Stop You can also stop the grid from switching layouts with the `viewport-stop` attribute on the `` tag, like so: ```html ``` > **Note:** You can set `viewport-stop` to remove the viewport attribute completely, which means **the viewport process will no longer run on device resize.** ### Viewport Stopped Grid Here is a complete grid with viewport stopped: [Example code](https://app.zingsoft.com/demos/embed/DWPW5S7C) ## Viewport Types You can define your own breakpoints with the `viewport-types` attribute on the `` tag (see below). You will have to style the grid based on the `viewport` selector. ```html ``` ![zinggrid.com](https://www.zinggrid.com/assets/img/viewport-type.gif) > **Note:** If you don't add a breakpoint with key "mobile", it won't switch between card and row layout-mode automatically. Adding custom breakpoints replaces the defaults instead of combining the two. > **Warning:** The custom-type object must be valid JSON, hence the use of single-quotes in the above example for the attribute's value. This allows the use of double-quotes for the object key/values. ### Custom Viewport Breakpoints Grid Here is a complete grid with custom breakpoints for resizing: [Example code](https://app.zingsoft.com/demos/embed/YL7H3124) ## Related Resources Here are some extra resources related to this feature to help with creating your grid: * [Adding Features Guide](https://www.zinggrid.com/docs/adding-features) * [API Layout Methods List](https://www.zinggrid.com/docs/api-methods#zg-layout) * [Attribute List](https://www.zinggrid.com/docs/api/tags/zing-grid) * [Viewport Documentation](https://www.zinggrid.com/docs/features/viewport)