Columns / Grids

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.

If you would like to set up a training for someone in your department who needs to learn our Drupal system or needs help beyond the basic instructions, please complete the request form and select training.

Ask for Assistance   Request Drupal Training


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:

CKEditor menu bar templates

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.

Insert grid template


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.

Screenshot of the Grid Edit Style menu

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
Column 1 of 2

Two-Column Grid
Column 2 of 2


Three-Column Grid

Three-Column Grid
Column 1 of 3

Three-Column Grid
Column 2 of 3

Three-Column Grid
Column 3 of 3


Four-Column Grid (Should be used only on full-width pages)

Four-Column Grid
Column 1 of 4

Four-Column Grid
Column 2 of 4

Four-Column Grid
Column 3 of 4

Four-Column Grid
Column 4 of 4


Five-Column Grid (Should be used only on full-width pages)

Five-Column Grid
Column 1 of 5

Five-Column Grid
Column 2 of 5

Five-Column Grid
Column 3 of 5

Five-Column Grid
Column 4 of 5

Five-Column Grid
Column 5 of 5


Two-Column Grid with 40/60 Split

Two-Column Grid with 40/60 Split
Column 1 of 2

Two-Column Grid with 40/60 Split
Column 2 of 2


Two-Column Grid with 60/40 Split

Two-Column Grid with 60/40 Split
Column 1 of 2

Two-Column Grid with 60/40 Split
Column 2 of 2

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.

Screenshot of how to add grid items to a grid

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.

Screenshot of how to delete a grid item


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.

Screenshot of how to delete an entire grid


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.

Grid Modifier box


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.