Content Grid

A bare content style that adds a multi-column layout option for content on basic pages or long text fields that use Rich Text Editor (RTE).

 

This is an example.

This paragraph is in this column. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Here is another paragraph in the other column. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

 

Use Case

Used to display content in multi column layout within the content in the body of the page. This is the responsive and accessible alternative to organizing your content within the RTE.

This provides a "container" for the grid and individual columns in four sizes:

  • Half (1/2)
  • Thirds (1/3)
  • Two Thirds (2/3)
  • Quarter (1/4)

You can mix and match columns provided that they add up accordingly. For example:

  • Two Column Examples
    Content Grid 2 Column Sets
  • Three Column Examples
    Content Grid 3 Column Sets
  • Four Column Example
    Content Grid 4 Column Sets

Regardless of column set up, all grids will responsively stack for screens and devices smaller than medium break point (<768px).

 

Usage

Every grid needs a container to hold the columns. The first step is always to create a Content Grid Container.

To add a Content Grid container,

  1. Add an insertion point to where you want the new layout in the Rich Text Editor
  2. Click the Div  Div Icon button
  3. In the options, choose the “Content Grid” in the style dropdown and click OK 

You should now see your cursor inside a dashed gray border, which indicates the boundaries of the container.

Curson inside content grid container
Figure 2. Cursor inside a content grid container.

Once you have set up a content grid container, you can start adding columns.

  1. While inside the content grid container, click the Div Div Icon button again
  2. In the style dropdown, choose the style (ex. ½ Column) of the column you want to add and click OK 
  3. To add additional columns, you first need to escape the column you just created. You can do so by hovering over the bottom line of the column you just added and click on the red return icon at the bottom of the block
  4. You can now click the Div Div Icon button again and add another column
  5. Repeat steps 3 to 4 until your row is complete. Remember, you can mix and match columns provided that the columns add up accordingly
Escaping a column and adding a new half column
Figure 2. Steps 3 & 4. Escaping the first column and adding another half column.

Important Notes:

  • You will need a content grid for each column set

  • All columns should be equally in the same level inside the content grid container

  • Be careful not to add empty spaces in the content grid container. The grid container can only contain columns or the grid will not work

  • It would be better to add a grid container and assemble your columns first before  adding content.

 

Best Practices

  • The column combinations must add up logically. The fractions must add up to a whole.
  • Do not nest columns. Use the red return icon to escape columns and ensure you are adding columns in the content grid container. All columns need to be in the same level within the container.
  • Be mindful of space and use a column size that makes sense. 
  • All columns should be equally in the same level inside the content grid container.
  • Be careful not to add empty spaces in the content grid container. The grid container can only contain columns or the grid will not work