Responsive Grid

The Responsive Grid includes one (or more) divisions which house other components. These divisions are responsive, adjusting to the size of the screen. You can set divisions to display either as a vertical stack or a horizontal row; the row will adjust to a reduction in screen size by stacking the divisions.

Using the Responsive Grid

Use the Responsive Grid to organize the page for the best possible user experience. Instead of asking the end user to scroll down to see additional components, for example, let the components sit beside one another.

Bring flexibility to the page layout by adding a Responsive Grid.

Then format it:

  • Add division to the Responsive Grid and configure the grid layout in the properties pane layout tab.
    • Use the Layout and Styles tabs to format how the grid looks on screen, where the divisions sit within the grid, and the overall spacing both within and around the Responsive Grid component.
    • Add Interactions to the grid.
    • Drag and drop components into each division.
  • Then edit the Division properties to customize how each division displays within the grid.

Grid components are also a great way to ensure that one Skuid page will work on both desktop and mobile. If using the component for this purpose, be sure to test the Skuid page on smaller screen sizes.

Best Practices

  • To control the size of the item within a division (and manage the amount of white space within the grid), set a division’s Minimum and Maximum width.
  • To achieve greater control over page layout and content wrapping, try using Grids within Grids.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Responsive Grid

Layout tab [[]]

  • Main Axis: Determines how to align the Responsive Grid divisions.

    Note

    The Ink Responsive Grid has a variety of values to represent the relationships of divisions within the grid. The easiest place to start? Try:

    • Main axis: Row
    • Justify content: Left
    • Align divisions: Top
    • Row: Aligns divisions in a row.

      • Justify divisions: Determines how the row of grid divisions will justify along a left-right axis.

        Note

        Useful to locate the divisions within the grid when they have both maximum and minimum width set.

        • Left (default): Divisions are justified with the left margin of the grid.
        • Center: Divisions are justified in the center of the grid.
        • Right: Divisions are justified with the right margin of the grid.
        • Space Between: Divisions are evenly spaced within the grid, with the first division justified to the left margin and the last division justified to the right margin.
        • Space Around: Divisions are evenly spaced within the grid. There is spacing between the first division and the left margin, and between the last division and the right margin.
        • Stretch: Stretches the division’s contents to fit the division’s full width.
      • Align divisions: Determines where divisions sit within the grid, positioning them along a top-to-bottom axis.

        • Top (default): Divisions are aligned with the top of the grid.
        • Middle: Divisions are aligned along a center left-right axis of the grid.
        • Bottom: Divisions are aligned with the bottom of the grid.
        • Stretch: Stretches the division’s contents to fit the division’s full height.
    • Column: Stacks division on top of one another.

      • Justify divisions: Determines how the stacked grid divisions will justify along a top-to-bottom axis.

        Note

        Useful to locate the divisions within the grid when they have both maximum and minimum width set.

        • Top (default): Divisions are justified along the top of the grid.
        • Middle: Divisions are justified in the center of the grid.
        • Bottom: Divisions are justified along the bottom of the grid.
        • Space Between: Divisions are evenly spaced within the grid, with the first division justified to the top margin and the last division justified to the bottom margin.
        • Space Around: Divisions are evenly spaced within the grid. There is spacing between the first division and the top margin, and between the last division and the bottom margin.
        • Stretch: Stretches the division’s contents to fit the division’s full height.
      • Align divisions: Determines where divisions sit within the grid, positioning them along a left-right axis.

        • Left (default): Divisions are aligned with the left margin of the grid.
        • Center: Divisions are aligned along the center top-to-bottom axis of the grid.
        • Right: Divisions are aligned with the right margin of the grid.
        • Stretch: Stretches the division’s contents to fit the division’s full width.
  • Column gutter size (optional): The distance between divisions when they are displayed as columns, side-by-side. (Typically affects devices with larger screens, such as desktops.)

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge
  • Row gutter size (optional): The distance between divisions when they are stacked as rows atop one another. (Typically affects smaller screen sizes or mobile devices.)

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

Advanced tab [[]]

  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Interactions tab [[]]

Click add Add interaction then select:

  • Action type: To initialize the display of the record details, choose the interaction:
    • Click: Best for desktop, as well as mobile.

In the dots-vertical More Options menu on the selected interaction, click Add action, then edit the Action Type:

Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

  • Spacing: Sets the spacing of the component relative to other components on the page. Spacing can be managed for Top margin, Bottom margin, Left margin, and Right margin. All margins can be set to one of the following:

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

    Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Background [[]]

Background type: This controls the appearance of the Responsive Grid’s background.

  • Default

  • Image: Pulls in an image from a Skuid data source.

    • Data source type: Select the data source type from which you will be pulling the image.

    Note

    Select “Ui-Only” for images associated with Ui-Only models.

    • Data source: Choose the specific data source containing the desired image. (Defaults to “Ui-only” for Ui-only models.)

    • Image Source:

      In Skuid Platform

      • File: Setting Data Source Type to REST and Data Source to SkuidLocal lets you access images previously uploaded within the Files tab.
        • File Name: If the file has been correctly uploaded, when you start typing the filename, Skuid will autocomplete.
      • URL: To access an image URL using Skuid Platform, you must change the data source and data source type:
        • Data source type: UI-Only.
        • Data source: UI-Only.
        • Image Source: URL
        • Model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model provides the needed model row context.
        • Image URL: Enter the complete URL.

      In Skuid on Salesforce

      • Static resource:

        Note

        You must have an image file uploaded as a static resource.

        • Resource name: If the file has been correctly uploaded, when you start typing the filename, Skuid will autocomplete.
      • URL:

        • Model: Skuid presents a list of available Models in the dropdown, and selects one for this field, but you can change it.
        • Image URL: The URL field. The user can select a URL field from the model, enter the complete URL, or use a global merge value to identify the URL.

        Note

        While the latter two options do not require a model to be specified, when using merge fields for the URL, setting the model provides the needed model row context.

    • Size: Control the size of the image.

      • Original: The image will display at its original size, without regard to the size of the Responsive Grid.
      • Contain: The image will scale so that it will at least meet the top and bottom margins of the Responsive Grid.
      • Cover: The image will scale so all parts of the Responsive Grid’s background are covered by the image.
    • Position: Choose the orientation of the image within the Responsive Grid.

    • Repeat: Determine if the image will repeat vertically, horizontally or both.

      • No Repeat
      • Horizontal
      • Vertical
      • Both
    • Special effects: Add special effects to Responsive Grid image.

      • No effects
      • Parallax means that, when scrolling, the contents in the grid will scroll over the image
    • Color: Background color behind image. Defaults to transparent.

      • Click the transparent symbol to open color the selection menu.
  • Color: Choose a color to serve as Responsive Grid background. Defaults to transparent.

    • Click the transparent symbol to open color the selection menu.
Height and scrolling [[]]
  • Height strategy:

    • Fit to Content: This sizes the Responsive Grid to fit the components within.

      • Max height (optional): The maximum height of the Responsive Grid component. Options are:

        • None

        • Short

        • Medium

        • Tall

        • Custom: Uses a custom height.

          • Custom Height: The height of the table, using a number and a sizing unit.
      • Min Height (optional): The minimum height of the Responsive Grid component. Options are:

        • None

        • Short

        • Medium

        • Tall

        • Custom: Uses a custom height.

          • Custom Height: The height of the table, using a number and a sizing unit
    • Fixed Height: Sets an absolute width.

      • Height:

        • Fit to Content

        • Short

        • Medium

        • Tall

        • Custom: Uses a custom height.

          • Custom Height: The height of the table, using a number and a sizing unit.
  • Overflow: Determines how content is handled when it overflows the grid’s height.

    • Scroll: The content is scrollable and a scroll bar is displayed.
    • Hide: The content that does not fit into the Responsive Grid remains hidden.
    • Show: The Responsive Grid resizes the content to fit into the Responsive Grid’s height.

Display Logic tab [[]]

Standard display logic options are available to display or hide the component or feature.

Responsive Grid Divisions [[]]

Click on any Division header text within the grid to access its properties:

  • Flex ratio: This sets the size of this division relative to other divisions. For example, if there are two divisions in a grid, and the flex ratio for each is 1, they will each take up ½ of the grid. If one has a flex ratio of 2, and the other has a flex ratio of 1, the first one occupies ⅔ of the grid, and the second one occupies ⅓ of it.

  • Minimum width: Sets a minimum width for the division. This governs division wrapping on smaller screens: when the minimum width is exceeded, the grid division will stack above or below other divisions. This can be specified using px, em, rem, %, vh, or vw measurements.

    Note

    • Em, %, vh, or vw are more responsive to screen size.
    • Ensure the division’s minimum width is at least as wide as its contents.
  • Maximum width: Sets a maximum width for the division.This can be specified using px, em, rem, %, vh, or vw measurements.

  • Align self: Sets a separate alignment for the selected division.

    Note

    This setting supersedes the alignment set for all divisions in the Responsive Grid properties, Layout Tab.

    • Top (default): Divisions are aligned with the top of the grid.
    • Middle: Divisions are aligned along a center left-right axis of the grid.
    • Bottom: Divisions are aligned with the bottom of the grid.
    • Stretch: Stretches the division’s contents to fit the division’s full height.
  • Change order: Click to move this division left or right in the grid.

  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the grid division; if preferred, give it a practical name.

Deep dive

Want to learn more about flexbox, the CSS layout model Skuid uses to support responsiveness in Ink components, including the Grid? Visit the Flexbox Playground.