Layouts

For use in containers of any width.

While many widgets require a layout to work correctly, there are some layouts that can be used to organize your content into columns of different widths. This is a great method to make your content more scannable and easily digestible.

These layouts are called "Grids." You can find them grouped together under the Layouts tab. Each has an icon that gives you a rough idea of what it will look like on your page and how many columns you can expect to see.

You'll notice that these layouts are labeled "grid _ + _". The sum of the two numbers will always equal 12.

Below is an example of the grid 6+6, which splits the content area into two sections.

Best practice: Keep the length of the content in all of your grid spaces relatively the same for the best visual design.

A screenshot of the backend of Sitefinity showing the content and layout sections. There is a gold circle around the word Layout.

A screenshot of the backend of Sitefinity showing the Layout menu showing the grid layouts.

Example grid layouts

grid 4 + 8

This is the left column of the grid 4 + 8 layout. This area could hold an image related to the content in the right column.

This is the right column of the grid 4 + 8 layout. It is wider than the left column.

grid 8 + 4

This is the left column of the grid 8 + 4 layout. This column is wider than the right column. You'll also noticed that this is the inverse or mirrored layout of the grid 4 + 8 layout.

This is the right column of the grid 8 + 4 layout. This area could hold an image related to the content in the left column.

grid 3 + 9

This is the left column of the grid 3 + 9 layout.

This is the right column of the grid 3 + 9 layout. It is much wider than the left column and can house a large amount of content.

grid 9 + 3

This is the left column of the grid 9 + 3 layout. It is much wider than the right column and can house a large amount of content.

This is the right column of the grid 9 + 3 layout.

grid 4 + 4 + 4

This is the left column of the grid 4 + 4 + 4 layout. All columns in this layout are the same width.

Pink tree blossoms frame this photo of Warriner Hall, the administration building at CMU.

This is the middle column of the grid 4 + 4 + 4 layout. All columns in this layout are the same width.

Four students walking out of residence hall wearing cmu gear.

This is the right column of the grid 4 + 4 + 4 layout. All columns in this layout are the same width.

grid 3 + 6 + 3

This is the left column of the grid 3 + 6 + 3 layout.

This is the middle column of the grid 3 + 6 + 3 layout. It is wider than the left and right columns in this layout.

Two men wearing glasses work on opposite sides of a white board.

This is the right column of the grid 3 + 6 + 3 layout.

grid 3 + 3 + 3 + 3

In the grid 3 + 3 + 3 + 3 layout, there are four columns of the same width. This is the first column.

Young man in CMU jacket sits in a kayak on a river.

In the grid 3 + 3 + 3 + 3 layout, there are four columns of the same width. This is the second column.

CMU interior design student working in classroom

In the grid 3 + 3 + 3 + 3 layout, there are four columns of the same width. This is the third column.

Police Officer L. Martinez smiles while surrounded by others who are walking by during CMU's Get Acquainted Day.

In the grid 3 + 3 + 3 + 3 layout, there are four columns of the same width. This is the fourth column.

McNair Scholar - Safiyah Ali

grid 2 + 3 + 2 + 3 + 2

The grid 2 + 3 + 2 + 3 + 2 layout is broken into five columns. The columns vary in width.

Student in fashion studio uses a sewing machine on a piece of pink cloth.

The grid 2 + 3 + 2 + 3 + 2 layout is broken into five columns. The columns vary in width.

A young man wearing a headset stands behind a tv camera recording a performance.

The grid 2 + 3 + 2 + 3 + 2 layout is broken into five columns. The columns vary in width.

Return to table of contents