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.
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
- Three Column Examples
- Four Column Example
Regardless of column set up, all grids will responsively stack for screens and devices smaller than medium break point (<768px).
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,
- Add an insertion point to where you want the new layout in the Rich Text Editor
- Click the Div button
- 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.
Once you have set up a content grid container, you can start adding columns.
- While inside the content grid container, click the Div button again
- In the style dropdown, choose the style (ex. ½ Column) of the column you want to add and click OK
- 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
- You can now click the Div button again and add another column
- Repeat steps 3 to 4 until your row is complete. Remember, you can mix and match columns provided that the columns add up accordingly
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.
- 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