Card Resizable

When your grid is in card layout, ZingGrid can let users control how many cards appear per row. Enable this by adding the card-resizable attribute to <zing-grid>.

This adds a card resize button to the grid's control bar. Clicking it opens a menu where users can toggle between two modes:

• Responsive (default) - cards are sized within a Min/Max cards-per-row range, using a "Card Size Scale" slider (XS - XL) to prefer a smaller or larger card size within that range.
• Fixed - cards are sized to a single, fixed cards-per-row count, set with its own slider.

Enable Card Resizing

Add card-resizable to <zing-grid> to enable the feature. By default, the menu opens in "Responsive" mode:

<zing-grid card-resizable
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>

Card Resizable Grid

Here is a complete grid with card resizing enabled:

Fixed

Set card-resizable="fixed" to start the menu in "Fixed" mode instead, sizing every card to a single cards-per-row count:

<zing-grid card-resizable="fixed"
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>

To set the starting cards-per-row count, add card-resizable-fixed with a value from 1-6. The slider itself always spans 1-6 - this only seeds its starting value, and dragging the slider afterward overrides it. This attribute only applies while the menu is in "Fixed" mode.

<zing-grid card-resizable="fixed" card-resizable-fixed="3" layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>

Fixed Card Resizable Grid

Here is a complete grid that starts in "Fixed" mode with a starting cards-per-row count of 3:

Responsive

While in "Responsive" mode (the default), cards are sized within a Min/Max cards-per-row range, and a "Card Size Scale" slider lets users prefer a smaller or larger card size within that range.

Card Size Scale

Use card-resizable-responsive to set the starting position of the "Card Size Scale" slider. It accepts one of "XS", "S", "M" (the default), "L", or "XL" - each step smaller/larger than "M" adds/removes one card per row at every viewport breakpoint. This attribute only applies while the menu is in "Responsive" mode.

<zing-grid card-resizable card-resizable-responsive="L" layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>

Responsive Card Resizable Grid

Here is a complete grid that starts with a "Card Size Scale" of "L":

Responsive Min/Max Range

The "Card Range" slider caps how few or how many cards can appear per row while in "Responsive" mode, regardless of the "Card Size Scale" chosen. Set it with:

• card-resizable-responsive-min - the fewest cards allowed per row. Accepts a number 1-6, defaults to 1.
• card-resizable-responsive-max - the most cards allowed per row. Accepts a number 1-6, defaults to 6.

Both attributes only apply while the menu is in "Responsive" mode.

<zing-grid card-resizable
  card-resizable-responsive-min="2"
  card-resizable-responsive-max="4"
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>

Responsive Min/Max Card Resizable Grid

Here is a complete grid limited to a range of 2-4 cards per row while in "Responsive" mode:

Keyboard Navigation

The card resize button in the control bar is a standard, focusable button - tab to it and press Enter or Space to open the menu. When opened via keyboard, focus automatically moves to the menu's Responsive/Fixed toggle.

Once the menu is open:

• Tab / Shift + Tab - cycles focus forward/backward through the menu's controls. Focus is trapped inside the menu, wrapping from the last control back to the toggle, and vice versa.
• Left Arrow / Right Arrow - while focus is on the Responsive/Fixed toggle, switches between "Fixed" and "Responsive" mode.
• Arrow keys - while focus is on a slider (Card Range Min/Max, Card Size Scale, or Fixed cards-per-row), adjusts that slider's value, per native <input type="range"> behavior.
• Escape - closes the menu and returns focus to the card resize button.

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• <zg-card-resize>
• Layouts
• Grid State Persistence
• Attribute List