FAQs

How do I create columns (grids) on my enterprise site?

About Grids

Grids are formatted to specific sizes. An individual grid (Grid 1) is 102 pixels wide with a 10 pixel wide buffer between the grid and surrounding content.

Since our page body is 680 pixels wide, this format allows a maximum of six individual grids in a row. If you make a grid larger than a single grid (Grid 2, Grid 3, etc), the intervening 10 pixels is incorporated into the total width of the grid. 

Knowing the size of the grid is important if you want to include images in your grid. As you recall, when embedding images on your page, you can choose what side the image should be. You'll want to make sure your selected grid si always larger than the image size you choose, otherwise they won't match up. 

Choices for Grid Sizes

Grid 1 is one grid wide.  It measures 102 pixels with a 10 pixel buffer.

Grid 2 is two grids wide. It measures 214 pixels with a 10 pixel buffer.

Grid 3 is three grids wide. It measures 326 pixels with a 10 pixel buffer.

Grid 4 is four grids wide. It measures 438 pixels with a 10 pixel buffer.

Grid 5 is five grids wide. It measures 550 pixels with a 10 pixel buffer.

Grid 6 is six grids wide. We generally don't bother with Grid 6. It's the same as using the full width of the page.

Basic Grid Instructions

  1. Be logged into your enterprise site, and on the edit tab of the page you want to modify. 

  2. Highlight the content you want turned into a grid (the content you want in one column).

  3. Click div in the formatting bar for the page.

  4. A window will pop up where you can choose the type of grid you want applied. Select your grid size in the Style dropdown menu.

  5. Click "OK" to close the window.

  6. Repeat these steps with any other content you want in a grid.

If after saving your page your content shifts and does not look aligned, follow these steps:

  1. Go into the Edit tab of the page you're working on.

  2. Click on the <>Source button in the formatting bar. This opens the HTML source code.  

  3. Find and delete all instances of the term: <p>&nbsp;</p>

  4. Save your page again. 

Arranging Multiple Grids

You can arrange multiple grids side-by-side, so long as the total of all grids does not exceed the page width. Pages on the Enterprise CMS are 680px wide.  

An easy way to check is to add the grid numbers together; so long as they add up to 6 or less they can be in the same row. For example, you can have Grid 2 + Grid 2 + Grid 2, or Grid 4 + Grid 1 + Grid 1, since 2+2+2=6 and 4+1+1=6. However, you cannot have Grid 4 + Grid 3 since 4+3=7. 

Sample Grid Arrangements

Two Grid 3s make two columns of equal width.

Three Grid 2s make three columns of equal width.

You can combine different grid styles to make columns of different widths. For example, make a wide column using Grid 4 with a thinner Grid 2 column next to it. 


You can also combine content in grids with content not in grids. Grids automatically "float left", so any content not in a grid will flow into the space to the right. Grids will automatically line themselves next to each other, so long as there is enough room to do so. 

Try as we might, we cannot nest columns; however, we can arrange them to visually nest. For example, you can have a lot of content in a Grid 2, then to the right of it have less content in other grids of varying sizes. This will cause the other grids to stack on top of each other. 

Arranging Columns with Rows

Using grids, you can also create the effect of columns and rows, much like a table. 

Sample Grid Arrangement: Two Equal Columns and Rows

Before

 

Use Grid Styles to Create Columns

Columns provide organizational and visual structure. Use them in various combinations, depending on the content you want to display. Consider how much content you want to display, how similar or different that content is, and whether some content has a higher priority than other.

Include Images (or not)

Images bring color and visual interest to your page. Using images requires planning and preparation before you upload and embed them. Use image editing software like PicMonkey to crop and size the images—the Enterprise CMS can't help with these tasks.

Link to the Details

Don't reiterate information available on other enterprise websites. If there is already a page that covers the essentials of your writing, link to that page. You can also provide some information, then a link for further inquiry. 

Images of People Pose Challenges

Practice cropping images to make the best use of the expressions, personalities, and space. You might have to practice your math skills as well because you don't want to end up with distorted images.

After

Using four Grid 3 sections, you can create two columns with two rows in each column. You can also include images and have them "Float Left" or "Float Right" to increase visual appeal. 

Sample Grid Arrangement: Three Equal Columns

Before

 

Use Grids for Aesthetics

Grids provide organizational and visual structure. They can be used in a variety of ways, but sometimes the simplest methods are the best. No matter what, make it look good. 

Include Images

Images bring color and visual interest to your page. Prepare correctly sized images outside of the Enterprise CMS and then upload them. The extra effort is worth it. 

Practice Makes Perfect

Grids can be tricky to use; they are not intuitive, and can sometimes get messed up without a clear reason why. However, the more you practice, then easier they'll become.

After

Using three Grid 2 sections, you can create three columns of equal width. Images can be included in the grids to increase visual interest. 

Non-Grids Alternative

You can also create a layout with a column of images to the left and explanatory text to the right. This is commonly used for staff profile pages. To create this layout, add each image above the text you want to the right of the image. After inserting the image, use the style dropdown menu to have the image "Float Left". 

Additional Resources

Fro additional support, email ucomm-support@pdx.edu