Skip to Main content
Apply
Home / Administrative Support/Information Technology/Web Services/Web Style Guide/Blocks/Grid System

Grid System

Web Style Guide

Many of the Repeating Blocks are based on a simple but flexible grid system that allows you to add as few or as many items to the grid as needed and customize the number of items per row if necessary.

Grid Defaults

Grid items are designed with default styles that should work in a wide variety of use cases “out-of-the-box”.

  • Grid layouts will divide the space in a row equally between all items in the row.
  • Grid items will get smaller in width, down to a preset minimum, to fit as many items as possible in a row.
  • By default, the minimum width grid items are allowed to get is 200px.
  • Grid items will wrap to a new row when space does not permit them to be placed on the same row.
  • With these defaults, a grid can accommodate up to 3 items per row in the normal main content area or up to 5 items per row inside a wide content area.

Grid Customizations

All grid-based content layouts can take advantage of the Wide Block customization in order to increase their widths and accommodate more items per row.

In addition, there are other custom formats that can be applied to adjust the grid behavior if the defaults do not result in the desired layout. These formats are also found in the Formats menu under “——Grid System——”.

Maximum Columns

These options can be used to change the maximum number of columns that can fit in a row. For example, if three items naturally fit in a row but you only want two per row, choose the Maximum Columns: 2 option (see the 2 Columns example below).

Note: The maximum number of columns can not be higher than what the minimum column width will allow.

Minimum Column Width

These options can be used to change the number of items that will fit in a row by changing the minimum width that items are allowed to be. For example, if three items fit in a row at the default minimum width of 200px, but you want four items, choose the Minimum Column Width: 150px option (see the 4 Columns example below).

Note: Smaller minimum widths could lead to difficult-to-read content, so use with caution.

Note

All defaults and examples discussed on this page apply only at desktop sizes. Smaller screens, such as mobile devices, will wrap grid items to new rows as necessary.

Examples

In the following examples, we will start with a grid that contains eight items. With the default values, the grid would result in a maximum of three items in each row.

1
2
3
4
5
6
7
8

2 Columns

If you want to create a two-column grid, you can apply the Maximum Columns: 2 format. The grid will no longer allow more than two items per row, and the desired layout can be achieved.

1
2
3
4
5
6
7
8

4 Columns

If you want the grid to accommodate four items in each row, you can apply the Minimum Column Width: 150px format. The grid items will now be allowed to get smaller, meaning more items can fit in a row, and the desired layout can be achieved.

1
2
3
4
5
6
7
8

Wide Grid

Apply the Wide Block format to your grid to expand its width beyond the main container. This will allow more items to fit in a row by default.

1
2
3
4
5
6
7
8

The following example uses the Wide Block format and the Maximum Columns: 4 option.

1
2
3
4
5
6
7
8

Grid Block

The Grid Block content layout is the simplest implementation of the grid system. When placed on a page, it contains 3 blocks. Blocks can be added, removed, or reordered using the controls, and grid properties can be adjusted using the Formats described above.

screenshot of the Grid Block content layout during editing showing the add, delete, and reorder controls.