---
title: "Responsive GridLayout with CSS"
slug: "responsive-gridlayout-with-css"
tags: ["Resizing", "Dynamic Behaviors", "Look and Feel", "CSS"]
updated: 2025-06-16T20:18:21Z
published: 2025-06-16T20:18:21Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive GridLayout with CSS

## Overview

The GridLayout uses a [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to control its layout. Compared to a regular Grid Layout, a CSS Grid reduces HTML overhead and allows users to author CSS documents to [apply CSS](/v9/docs/using-css-in-forms) to the Form layout. This CSS control ability is particularly useful for creating responsive layouts.

---

## Example

In this example, [CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) rearrange the Form by changing between o one or two column layouts to tighten spacing 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](/v9/docs/uploading-css). In broad terms, three things are done:

- Apply class name to root to override its default size behavior
- Apply class names to specific child layouts 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 to override certain settings on smaller screens.

Download and [import this example file](/v9/docs/importing-and-exporting-projects) to follow along with the instructions. If only requiring the CSS file, upload the CSS provided file instead.[ArticleExample[ResponsiveGrid].zip](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/ArticleExample%5BResponsiveGrid%5D.zip)[ArticleExample[ResponsiveGridCSSExample].css](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/ArticleExample%5BResponsiveGridCSSExample%5D.css)

1. Open the 'Show Responsive CSS Grid Form' Flow from the above example file.
2. Select the Form and click**EDIT [FORM NAME]** to open it in the Form Designer. The Form uses various GridLayouts. One covers the base of the Form with nested Grids to denote sections. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-06_10h02_37.png)
3. Open the Form's Properties, and select the CSS file included in the example zip file if not already applied: 'responsive-css-grid-demo.css'. If using only the CSS file, this is named 'ResponsiveGridCSSExample' instead.
4. Assign each GridLayout a CSS Class. 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 the GridLayout containing 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.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-06_10h06_05.png)

---

## Debug

1. Save and exit the Form Designer to return to the Flow Designer.
2. At the top right of the workspace, select the **Configure Integration**drop-down menu. Under **Integration Type**, choose **User Interface**. Select DONE.
3. Select VIEW to open Integration Details in a separate tab in the browser.**![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-16_16h09_46.png)**
4. In the top right column, select **Open URL**.
5. When the Form opens, adjust the browser's size to ensure the CSS works as expected.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/ResponsiveGridLayoutwithCSS-ezgif.com-video-to-gif-converter.gif)

---

## Examining the Example CSS

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 define the start and end cells of the CSS for each element. Since they are defined by CSS for GridLayout, elements can be modified by CSS.

```css
@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; 
} 
}
```