Columns / Grids

A website grid is a framework that divides a webpage into rows and columns to organize content consistently and efficiently. It ensures alignment and structure, making the design visually appealing and easy to navigate.

Grids are often based on a 12-column system, providing flexibility to combine columns for various layouts. They adapt to different screen sizes, ensuring the website is responsive. This systematic approach simplifies design, development, and ensures a cohesive user experience across all devices.

There are many ways to create columns within Sitefinity websites. Here are 3 of the most common:

• Using the different content modules like Lists, Blogs, Events, etc. to display the content created within those modules in columns.
• The Sitefinity Layout editor is designed to organize the page’s columns when not using a Sitefinity module or to further divide the content.
• Using pre-written classes and writing the HTML within the WYSIWYG is also an option but requires solid HTML and CSS knowledge.

Below we will explain the basics of the grid and breakdown the 3 options above.

A grid is a system of intersecting lines that helps arrange content in an orderly fashion. In web design, a 12-section grid is very common because 12 sections offer a lot of flexibility as 12 can be divided by 2, 3, 4, and 6, which makes it easy to create various layouts.

A grid with 12 sections divides a webpage into 12 equal parts, or units, each unit is 1/12th of the total width of the webpage or section.

Imagine you have a large rectangular drawing board that you can divide into smaller sections to organize your content. One column could take up 4 units of 12 and the next column could take up 8 units, as long as the total equals 12, the columns will live on the same row.

You can combine these 12 units to create columns of different widths by adding units together. Here are some examples:

• 1 column: each column takes up 12 of 12 units or 100% of the width.
• 2 columns: each column takes up 6 of 12 units or 1/2 of the width.
• 3 columns: each column takes up 4 of 12 units or 1/3 of the width.
• 4 columns: each column takes up 3 of 12 units or 1/4 of the width.
• 6 columns: each column takes up 2 of 12 units or 1/6 of the width.
• 12 columns: each column takes up 1 of 12 units or 1/12 of the width.

Non-multiples of 12 can also be used in the layout editor and when hand-coding as long as the total number of units adds up to 12:

In web design, a grid can be adjusted based on the screen size of the device being used (like a phone, tablet, or desktop computer) or the area it is nested into to ensure content remains readable and accessible..

Examples of how the layout may be adjusted based on the screen size:

1. On a large screen (like a desktop), all 12 units might be arranged in 2 columns taking up 4 + 8 units.
   
2. On a medium screen (like a tablet), you may choose to simply split the columns to each take up half the screen, so instead of having 4 + 8 in a row, you might have 6 units per column, or you might stack some columns or make one column larger an another smaller.
   
3. On a small screen (like a smartphone), the columns might stack, maybe 1 column per row, making it easy to read and navigate.
   

Each framework sets its own breakpoints to determine the width of each screen size, so all mobile CSS classes are uniform.

UTMB primarily defines its breakpoints using the following screen sizes and CSS variables:

• Extra small, ≤639px wide screen
  • Class Prefix: xs
  • This breakpoint targets devices with a maximum width of 639 pixels like a cell phone.
• Small, ≥640px wide screen
  • Class Prefix: sm
  • This breakpoint targets devices with a minimum width of 640 pixels like a tablet viewed in portrait mode.
• Medium, ≥960px wide screen
  • Class Prefix: md
  • This breakpoint targets devices with a minimum width of 960 pixels like a tablet viewed in landscape mode.
• Large, ≥1200px wide screen
  • Class Prefix: lg
  • This breakpoint targets devices with a minimum width of 1200 pixels like a laptop or small monitor screen.
• Extra Large, ≥1600px wide screen
  • Class Prefix: xl
  • This breakpoint targets devices with a minimum width of 1600 pixels like a large monitor or TV.

The class naming convention for these columns tends to be the same across many CSS frameworks. The number displayed in the name is the number of units it takes up, not the number of columns being created. Then, most frameworks also add a screen size identifier to customize responsive layouts. For example:

• col-4 would mean that each of the 3 columns takes up 4 units of the 12-unit grid
• col-sm-6 would mean that all screens above the sm (or small) breakpoint would be a 2-column layout with each column taking up 6 units of the 12-unit grid

Content modules create collections of content that can be displayed on your web pages and in templates. The most common modules for content display which can also support grid layouts are the Lists, Blogs and Events modules. Learn more about each of these by clicking on the provided links.

When adding these widgets to the page and editing the options, there is a More options field where CSS classes are insert.

The breakpoints/screen sizes at which the CSS class will affect the design is built into the class name. For example:

• list-col-sm-3 will create a 4-column grid on all screens above the sm (or small) breakpoint with each column taking up 3 units of the 12-unit grid
• list-col-lg-2 will create a 6-column grid on all screens above the lg (or large) breakpoint with each column taking up 2 units of the 12-unit grid

You can stack or group multiple classes to rearrange these columns to ensure content remains readable and accessible on all screen sizes. For example:

• list-col-sm-3 list-col-lg-2: this combination will create a 4-column grid on phone or tablet, then on a larger screen like a computer monitor or TV a 6-column grid.

The naming convention for these classes follow the same basic construct as mentioned above, with the term “list-” prepended to the class names. This is done to allow further customizations to the module grid without affecting or conflicting with the generic grid.

The following pre-written classes work for all 3 modules:

The Layout editor is an easy and intuitive way to create grid-like layouts for your website pages. With the Layout editor, you modify pages and templates by defining new content placeholders and reordering and resizing the elements of a page or template. The editor can be used in conjunction with the customized content modules when a need is presented.

For example: the content plan calls for a body of text to be displayed to the right or left of a 2-column grid List. Simply add a 2-column layout from the layout editor, add the Content Block with text in its appropriate place, then add a List widget to the other column, following the steps above to add the class to divide that list in to 2 columns.  

Learn more about the Layout Editor

Building a grid yourself requires a solid knowledge of HTML and CSS. You can write these grids in any content type which provides a WYSIWYG editor and has a display option of full HTML.

At UTMB we use 2 CSS frameworks to build grids: UIkit and Bootstrap 3. Using one of these provided links, all available grid options should function within Sitefinity, given they are not conflicting with other grids on the page.