Responsive GridLayout with CSS

Overview

The GridLayout uses CSS Grid to control the layout. Not only does this reduce HTML overhead compared to its predecessor, but this also opens the door for users authoring CSS documents to use CSS to control the layout of the form. This CSS control ability is particularly useful for creating responsive layouts. 

Example

The below Form layout will be rearranged using CSS Media Queries to tighten spacing and change the layout from a two-column layout to a one-column layout, based on the browser’s size. This is accomplished by adding CSS class names to the elements to control and then defining different rules for those elements in the CSS document. In broad terms, three things are done: 

• Apply class name to root to override its default size behavior 
• Apply class names to specific child containers to override their position as configured in Form Designer 
• Apply a CSS class to the Form containing @media breakpoints with rules for the class names above, which override certain settings on smaller screens. 

1. In the Form Designer, the Form uses a GridLayout, where there is one GridLayout to cover the base of the Form, and other sections are added within. GridLayouts can contain any combination of rows and columns. 
2. Add the CSS to Decisions then apply it to this Form. Learn how to do this in the Uploading CSS in Decisions article. 
3. Each GridLayout will need a CSS Class assigned to it. With a GridLayout selected, in the Properties panel, expand View, and choose the CSS Class.

   GridLayout	CSS Class
   Root GridLayout	outer-grid
   First Card GridLayout	card-grid one
   Second Card GridLayout	card-grid two
   First Name GridLayout	.input-1-1 {}  nothing to define for 1-1. The configured behavior is the same.
   Last Name GridLayout	input-1-2
   Email GridLayout	input-1-3
   Call Sign GridLayout	input-1-4
   Street GridLayout	.input-1-1 {} nothing to define for 1-1. The configured behavior is the same.
   City GridLayout	input-1-2
   State GridLayout	input-1-3
   Zip GridLayout	input-1-4

   Notice, on the GridLayout that contains the label "Zip" and the Textbox. The CSS Class is set as "input-1-4". The "Zip” container is in the 2nd row, 2nd column, but in the CSS document, the class "input-1-4" is used as a handle to change this element to be in the 1st column, 4th row below a certain screen size.

   

Debug

1. Add this Form to a Flow to Debug.
2. Select Configure Integration in the Flow Designer. Under Integration Type, choose User Interface. Select DONE.
3. Select VIEW to open Integration Details.
   
   
4. On the Integration Details page, select Open URL.
5. When the Form opens, adjust the browser's size to ensure the CSS is working as expected.

CSS used in Example

Below is the CSS used in this example. The main blocks are the @media screen blocks. The first @media screen declares card grid styles for when the screen size is 800 pixels or above. The second @media screen redefines the CSS Grid positions for the class names associated with those elements on screens below 800 pixels. This will override the original styles created by the Form Designer.

The grid-column and grid-row here define the start and end cells of the CSS for each element. Because they are defined by CSS for GridLayout, they can be modified by CSS, which gives the CSS author complete control. For example, some additional vendor-specific CSS to support old browsers.

@media screen and (min-width: 800px) 
{ 
.outer-grid .card-grid 
{ 
border: solid 1px rgba(0, 0, 0, 0.15); 
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), 0px 3px 9px rgba(0, 0, 0, 0.2); 
} 
}
 
@media screen and (max-width: 799px)
{ 
.outer-grid 
{ 
padding: 0 0 15px !important; 
/* remove outer margin on three sides */ 
row-gap: 0 !important; 
/* remove gutters between the cards */ 
width: auto !important; 
/* allow form to shrink below designed width */ 
} 
.outer-grid .card-grid:nth-child(odd) 
{
border-top: solid 1px rgba(0, 0, 0, 0.3); 
/* add a border where the row gap gutter was */ 
}
 .outer-grid .card-grid 
{ 
/* Change to 1 column, 8 rows */ 
grid-template-columns: auto !important;
grid-template-rows: 92px 92px 92px 92px !important; 
} 
/* .input-1-1 {} nothing to define for 1-1. The configured behavior is the same. */ 
.input-1-2 
{ 
/* Moves to column 1, row 2 of the grid */ 
grid-column: 1 / 2 !important; 
grid-row: 2 / 3 !important; 
} 
.input-1-3 
{ 
/* Moves to column 1, row 3 of the grid */ 
grid-column: 1 / 2 !important;
grid-row: 3 / 4 !important; 
} 
.input-1-4 
{ 
/* Moves these to column 1, row 4 of the grid */ 
grid-column: 1 / 2 !important;
 grid-row: 4 / 5 !important; 
} 
}