How to use a flexible grid for page layouts

Last update:

Audience: Developers building Sapho micro apps

The Flexible Grid is a layout component that gives you more control over the positioning of components on your micro app pages. This can be especially helpful when you’re designing pages for micro apps intended for devices with larger screens, such as tablets and desktops.

You can find the Flexible Grid component in the Layout Components section of the Page Builder.
fg1.png

In Flexible Grid Properties, you can set the label and the total number of cells you want in your grid.
fg2.png

You can also set how many columns the grid should contain and whether that number should be the same for all devices. For example, you could choose to show only two columns on mobile (as shown above) while showing four on tablets and desktop:
fg3.png

Once you have selected the number of columns, you can specify how the space should be divided between them. By default, the space will be divided evenly, but can be adjusted.
fg4.png

The Formatting section (which can be found in the right sidebar below Flexible Grid Properties) is where you will find most of the options that you have available for your layouts. Each option is described briefly below:
fg5.png

  • Label Position on Desktop - On smaller devices, the label position will always default to the top of the grid. With desktop, there is also an option to have it to the left of the grid.
    fg6.png
  • Cell Horizontal Alignment - Whether a component will be aligned to the left, right, or middle of a cell. This setting affects the alignment of all the cells in the entire grid.
  • Cell Padding - Adds the selected amount of padding, or empty space, between the component and cell border.
  • Column Spacing - Adds the selected amount of padding between grid columns.
  • Row Spacing - Adds the selected amount of padding between grid rows.
  • Edge to Edge - By default, there is alway a small amount of padding between the grid and the edge of the page in order for it to line up with the other components on a page. Selecting this option removes that padding and stretches the grid to match the whole page width.
  • Cell Border Style - Here you can select if you want to show cell borders and whether they should be solid or dotted.
  • CSS Class - As with most other components, you can apply a CSS class to the grid for additional formatting options.