Responsive Grid

Note

Use the Responsive Grid instead of the Panel Set (a deprecated layout component which is not responsive).

A layout component, the Responsive Grid includes one (or more) divisions, which can, in turn, house other components. These divisions are responsive, adjusting to the size of the screen.

Additionally, you can add side-by-side divisions that will then become a vertical stack when adjusting the size of the screen.

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 the page to see a second component, for example, let the components sit beside one another.

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

Then format it:

  • Add Divisions to the grid and configure its layout in the Properties pane layout tab.
  • Use the Styles tab to format the grid’s background.
  • Drag and drop components into each division.
  • Edit each division’s properties to adjust how the grid looks on screen.

Once the grid is finished, take a look at the results:

  • If you chose Flexible Width and set the minimum size, the divisions wrap as the screen gets smaller—down to that specific limit.
  • Fit to Content auto adjusts to the size of the content—change the content and the division adapts.
  • Divisions set to a Specified Width do not adjust as the screen is resized.

Responsive 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

  • When you specify a division’s Width (or Minimum Width), this enables the division to wrap vertically.
  • To achieve greater control over page layout and content wrapping, use Responsive Grids within Responsive Grids.

Properties

Responsive Grid Properties

Layout tab [[]]

  • Column Gutter Size (optional): The distance between divisions when they are displayed as columns, side-by-side; can be specified in pixels, percentage, em, vh, or vw. (Typically affects devices with larger screens, such as desktops.)
  • Row Gutter Size (optional): The distance between divisions when they are stacked as rows atop one another; can be specified in pixels, percentage, em, vh, or vw. (Typically affects smaller screen sizes or mobile devices.)

Advanced tab [[]]

Styles tab [[]]

In Styles you can set and configure a background color/image for this the grid:

  • Background:

    • Not Set

    • Image: Add an image as background.

      • Data Source Type: The data source type used to access the data source that contains the image.

      • Data Source: The data source containing the image.

      • Image Source:

        In Skuid NLX:

        • 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.

          Note

          To access an image URL using Skuid NLX, you must change the data source and data source type:

          • Data Source Type: UI-Only.
          • Data Source: UI-Only.
          • Image Source: URL

        In Skuid SFX:

        • 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: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model the provides the needed model/row context.
          • Image URL: Enter the complete URL.
  • Size: Adjust the size of the image in the background.

    • 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: Set the location of the image within the background.

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

  • Special Effects: Parallax means that, when scrolling, the contents in the grid will scroll over the image.

  • Color: Select a color from the color picker (defaults to Transparent). If the sizing or positioning choices leave space around the image, that space displays the selected color.

  • Color: Assign a color to the background

    • Color: Select a color from the color picker. The background displays as the selected color.

Display Logic tab [[]]

Conditional rendering allows you to display or hide the Responsive Grid, based on defined data conditions.

Responsive Grid Divisions [[]]

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

  • Division Behavior: Determines how the division will size itself in relation to other divisions within the grid.

    • Flexible Width: Flexible Width divisions take up as much room as is available; when the screen size shrinks they also size down to their minimum width before wrapping onto a new row.

      • Flex Ratio: This sets the size of this division related to other flexible width divisions. For example, a flex width division with a ratio of 2 will be double the width of a division with a flex ratio of 1.
      • Minimum Width: To enable wrapping on smaller screens, set a minimum width.

      Note

      Make sure the division’s minimum width is at least as wide as its contents!

  • Fit to Content: This sizes the division to fit the component within.

    Warning

    Select Fit to Content only if the division already has content. An empty division set to Fit to Content will resize to quite small and will be more difficult to select and edit.

  • Specified Width: Sets an absolute width.

    • Width: This can be specified using px, em, %, vh, or vw measurements.

    Note

    Em, %, vh, or vw are more responsive to screen size.

  • Vertical Align: Set the contents of the division to align to the:

    • Top
    • Center
    • Bottom
  • Change Order: Click to move this division left or right in the grid.

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

  • CSS Class (optional): Assign a CSS class to the component’s DOM element.