CSSGrid Container

Description

Allows you to position controls in a grid of rows and columns to easily define complex, responsive layouts.

Discussion

The CSS Grid Container allows you to design a responsive layout of controls based on a grid layout. Individual controls are placed in rows and columns within the container. Controls can be configured to span multiple columns and rows. The number of columns, row sizing, and spacing is fully customizable.

The CSS Grid Container uses CSS Grid Layout (MDN) under the hood to define the layout of controls in the container. CSS Grid Layout is a layout that divides a page or section of a page into a grid of rows and columns, similar to an HTML table but with more ease and flexibility.

The image below shows a UX layout created using the CSS Grid container.

CSS Grid container layout with controls for collecting personal data
CSS Grid container layout with controls for collecting personal data

The image shows that the Firstname and Lastname fields are both on the same row and have the same width.

The Address field is on the next row and its width if the full width of the container.

The City, State and Zip fields are all on the same row, but City is defined as 3 times the width of State and Zip is defined as twice the width of State.

Finally there are two buttons. The first button is aligned to the left of the container and the second button is aligned to the right of the container.

To make the City field 3 times the width of the State field, the grid was configured to have 6 columns, the City field was configured to have a span of 3 columns and the State field was configured to have a span of 1 column. Finally, the Zip field was configured to have a span of 2 columns so that it would be twice the width of the State field.

The layout is completely responsive. So, if the width of the container increases, the layout changes accordingly:

CSS Grid container rendered on a larger screen
CSS Grid container rendered on a larger screen

Adding a CSS Grid Container to a UX 

To add a CSSGrid Container control to your UX component, select the [Container] item from the toolbox in the UX Builder.

Containers toolbox with the Container control highlighted
Containers toolbox

Then select the CSSGrid container type.

Insert Container dialog
Insert Container dialog

Next, you can configure the CSS Grid container to set properties such as the number of columns and rows and also the gap between each column and row. To open the genie to configure the CSS Grid container, click the smart field for the CSS Grid Container Layout property.

CSS Grid Container Layout property
CSS Grid Container Layout property

This will open the genie as shown below:

CSS Grid Container Genie
CSS Grid Container Genie

Configuring a CSS Grid Container 

The genie will allow you to set the dimensions of the grid:

Grid Property
Description
Rows

The number of rows in the container.

Columns

The number of columns in the container.

Column gap

The space between each column.

Row gap

The space between each row.

Custom column sizes

Optional. Allows you to to define and explicit width for one or more columns. Columns default to 1fr (one fractional unit).

Column sizes are specified as a space delimited list of values. E.g. 100px 100px 1fr. The values are ssigned to each column in the layout as defined in the layout, from right to left, using the specified values. For example, if your layout has five columns, you could define an explicit width for the third column as follows:

1fr 1fr 200px

Note that there is no size defined for the fourth or fifth columns. Columns without a defined size are automatically assigned the width of 1fr. By automatically assigning a width, this allows you to add additional columns without needing to update the column sizes.

Custom row sizes

Optional. Allows you to define an explicit height for one or more rows. Rows default to auto (height of row is automatically computed from its contents).

Row sizes are specified as a space delimited list of values. E.g. 100px 200px auto. The values are assigned to each row in the layout as defined in the list of values. For example, if your layout has four rows, you could define an explicit height for the second row as follows:

auto 250px

Note that there is no size defined for the third and fourth row. Rows without a defined size are automatically assigned the height of auto. By automatically assigning a height, this allows you to add additional rows without needing to update the row sizes.

Custom Row and Column Sizes 

By default, rows and columns are automatically sized to best fit the contents and space, allowing them to grow or shrink as the container's size changes. All columns are sized to have the same width, 1fr. All rows automatically adjust to the height of their contents, auto. Rows and columns can be set to an explicit size by defining custom sizes.

To specify an explicit size (e.g. 100px) for a row or column, check the associated Has custom size checkbox.

Values are defined as CSS size units. Column sizes can be defined as flexible track lengths. Flexible tracks are denoted using fr. They are a relative size computed from the leftover space within the container. For example, imagine your CSS Grid is 500px wide and contains three columns with the following columns sizes:

1fr 200px 2fr

The second column consumes 200px of width. This leaves 300px for the remaining columns. The first column has a size of 1fr and the last column a size of 2fr (3fr total). The resulting size of the first and last column would be 100px and 200px, respectively. If the CSS Grid grows to a width of 800px, the first column would grow to a width of 200px and the last column 400px.

Adding Controls to the Layout 

Controls contained in the CSS Grid container are shown in a list on the left-hand side of the CSS Grid Container genie.

To place a control on the grid, click on an empty cell, and select the control to add. Clicking an empty cell in the grid displays a popup menu of the available controls that can be added to the layout. Select a control from this list to add it to the selected cell.

CSS Grid Container Select Control Dialog
CSS Grid Container Select Control Dialog

Once a control has been placed on the Grid you can set the control's properties. Select the control whose properties you want to set in the pick list in the top left hand corner. The control will be highlighted on the grid and its properties will be shown in the genie.

You can set the following properties:

Property
Description
Starting column

This is the grid column where the control will be positioned. If you set this to auto, the control will be positioned in the next available column on the grid. There are buttons to the right of the Starting column property. These buttons allow you to set the starting column to auto, (F) first column in the Grid, (M) middle column in the Grid, or (L) last column in the Grid.

Starting row

This is the grid row where the control will be positioned. If you set this to auto, the control will be positioned in the next available row on the grid. There are buttons to the right of the Starting row property. These buttons allow you to set the starting row to auto, (F) first row in the Grid, (M) middle row in the Grid, or (L) last row in the Grid.

Column span

This is the number of columns that the control will span. You can click the width button to make the control span the entire width of the container. By default, controls will have a column span of 1.

Row span

This is the number of rows that the control will span. You can click the height button to make the control span the entire height of the container. By default, controls will have a row span of 1.

Horizontal justification

This is the horizontal justification of the control within its grid cell. Options are start, center, end and stretch. The default is stretch - the control will fill the available horizontal space in the cell.

Vertical alignment

This is the vertical alignment of the control within its grid cell. Options are start, center, end and stretch. The default is stretch - the control will fill the available vertical space in the cell.

CSS Grid properties for a control
CSS Grid properties for a control

When you open the CSS genie initially none of the controls contained in the container will have been placed on the grid.

You can click the Additional options button to get a list of menu choices.

CSS Grid Additional Options button
CSS Grid Additional Options button

One of the available choices (Auto populate the controls onto the grid) will automatically place all of the control on the grid. Each control will be assigned a starting column and row of auto and row and column spans of 1, so the grid will just fill with the controls from left to right, top to bottom.

Other choices in the Additional options menu allow you to add a new row or column at the start of grid (which you click the + button next to the Columns property, the new column is added at the end of grid. When you add a new column at the start of the grid, the existing controls are all shifted to the right by one column).

You can also clear all controls from the grid, or clear just the selected control.

Available Additional Options
Available Additional Options

Related Articles 

Name
Description
Configuring Float Above Labels in CSSGrid Containers

Controls configured to use the Float Above behavior can be used in a CSSGrid Container but need to be configured to display the label inside the Textbox control. If set to display above the control, the label may disappear when placed inside a CSSGrid Container.

Videos 

Creating Complex Responsive Layouts using the CSS Grid Container

The CSS grid specification allows you to create complex responsive layouts. In this video we show how you can use a CCSGrid container type to create a complex, responsive layout.

Download Component

2021-12-05