If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu to ask for assistance.

Ask for Assistance 

---

Grids are column elements that will automatically scale and adjust to different window sizes allowing users on all screen sizes, including tablets and mobile, to view your content easier.

Getting Started Tip

One thing to consider when using grids is how they work when viewed on mobile or other smaller screens. When viewed on a mobile screen, grid items will stack on top of each other—the grid item on the right will drop below the grid item on the left. If you have more than two grid items they will continue to stack on each other in a zipper style layout. This means that if you have multiple paragraphs or sections in one grid item, the second grid item may look out of place in the mobile view.

Grids should not be used for table data (information that requires a header to be understandable). Table data that needs to retain it's row/column structure should use the responsive table template.

Responsive Tables

---

Add Grids

To add a grid to your content, place your cursor in the spot where you want the new grid to be and click the template icon:

 

This will bring up the Add Templates pop-up window on the Content Templates tab. To insert a grid, click the Grid option in the upper left, then click the Insert Template button and the new grid will be automatically inserted into your content.

 

---

Grid Styles

Once you click on the Insert Template button a default two-column grid will appear. If you want to change the number of columns or the proportion of a two-column grid, you can change the type of grid you would like by clicking on the bright pink paint palette icon in the upper left of the grid, to see the drop down menu of grid options.

 

To add content to your grid, you can type directly into the Grid Item boxes, or use a copy and paste option to add content into the new grid areas.

---

Grid Examples (Change width of your browser window to see how the grids respond)

Two-Column Grid (Default)

---

Two-Column Grid with 40/60 Split

---

Two-Column Grid with 60/40 Split

You can move back and forth between the different Grid styles simply by selecting a different Grid option, so if you have a two-column grid and want to make it a three-column grid, just select the three-column grid option. If you choose to make it back into a two-column grid, you can re-select the two-column grid.

NOTE: Selecting a Grid style with more columns will not automatically add columns. If you change from a 2-column Grid to a 4-column Grid but only have 3 Grid Items, you will need to use the Green + to add additional columns. Each Grid style is always labeled at the top of the Grid with (# Column Grid).

---

Add Grid Items

To add grid items one at a time, click on the Green + button located in the top right corner of the grid box. This will add a grid item to the bottom of your grid after your last current grid item.

 

NOTE: The Green + button will not add new columns to the Grid box. If you want to change from a 2 Column Grid to a 3 Column Grid you will need to use the pink palette icon to switch between Grid styles.

---

Rearrange Grid Items

To rearrange grid items, click on the cross icon with arrows and drag that grid item to the place you want it to be and unclick. That should move the grid item to the correct place and move all grid items one place further down the grid.

 

---

Delete Grid Items

To remove one item from a grid, click the Red X button on that particular Grid item and it will delete it from the Grid.

 

---

Delete Grid

To remove the entire grid, click on the Red X button at the upper right corner of the entire Grid box and the entire Grid will be deleted.

 

---

Grid Modifiers

To modify the grid to be flush (all items in the grid have no space between them) or to be strict (the last item in the grid keeps the format of the grid rather than filling the entire row), click on the yellow wheel in the upper left hand corner of the grid to see the drop down menu of grid options.

 

---

Flush Grid

Clicking the grid--flush option will remove the default spacing / padding around each grid item:

Non-Flush Example

 

Flush Example

 

 

---

Strict Grid

If you have an odd number of items in your grid, the last column will attempt to fill the entire space of the column. The grid strict will prevent grid item(s) from stretching across the whole grid and keep all of them the same size as the other grid items:

Non-Strict Example

 

Strict Example

 

To revert back to the default grid look, click the grid modifier again so that no option is selected.