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.

In Sitefinity

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.

The Basics

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.

sample of 4 column and 8 column combination to show 12 grid system

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.

sample depicting simple 12 column breakdowns divided by 2, 3, 4, and 6

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:

Sample of more complicated grid combinations

Responsive Design

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.
    sample of 4 column and 8 column combination to show 12 grid system
  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.
    Sample of a tablet mobile layout with 2 columns
  3. On a small screen (like a smartphone), the columns might stack, maybe 1 column per row, making it easy to read and navigate.
    Sample of a cell phone mobile layout with 1 column on each row

Breakpoints

image of brand representation across multiple digital devices

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 column class names

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

Sitefinity Modules

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.

Adding the Grid to the Widget

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

Learn how to do it:

How to

  • Add CSS Classes to a List widget on a page
    1. In the edit view of the page, click edit on the list widget.
      Screenshot showing the edit button on the list widget
    2. Click More options and insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. List widget helper classes can be found on the Sitefinity Cheatsheet
      screenshot showing css classes field
  • Customize Blog posts settings

    Within the edit view of a page, you can customize how blog posts display.

    1. After you have added the blog post widget to a page, click the Edit button on the widget
      screenshot showing edit button on blog post widget
    2. Under the List settings tab, select the paging and limit settings.
      • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
      • Use Limit: You can limit the number of items displayed.
      • No limit and paging: Shows all published items at once. This setting is not recommended.
        screenshot of blog post limit and paging settings
    3. You can sort blog posts with these settings:
      • Last published on top: This is the default setting. Sorts the latest articles that have been published in descending order by date.
      • Last modified on top: Sorts the latest articles that have been edited and saved in descending order by date.
      • By Title (A-Z): Sorts by the title field of the blog post.
      • By Title (Z-A): Sorts by the title field of the blog post.
      • As set manually: Sorts by the the order of the blog posts in the blog. You can manually reorder blog posts.
      • As set in advanced mode: Do not use this setting
        screenshot showing sort section of blog post widget
    4. Select the list template
      • Blog post list: This is the default setting. Displays the blog post title, date, time, author, summary, and featured image
      • Blog post slider: Displays the blog slide title (if this field is empty, it will display the blog post title), blog slide summary (if this field is empty, it will display the blog post summary), and the blog slide background image. See the Create a Blog slider how-to for more information about these fields.
      • Blog title date: Displays blog post title, date, time, author, and featured image
      • Blog title date full content: Displays blog post title, date, time, author, content, and featured image
      • Blog title date summary: Displays the blog post title, date, time, author, summary, and featured image
      • Blog title only: Displays the blog post title and featured image
        screenshot of blog post templates
    5. Add CSS classes
      •  Insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. View the blog posts classes and examples
        screenshot showing blog post widget css field

Responsive Design: Widget

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.

Knowing the CSS Class options

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:

Extra small,
≤639px wide
Small,
≥640px wide
Medium,
≥960px wide
Large,
≥1200px wide
Extra Large,
≥1600px wide
list-col-xs-2list-col-sm-2list-col-md-2list-col-lg-2list-col-xl-2
list-col-xs-3list-col-sm-3list-col-md-3list-col-lg-3list-col-xl-3
list-col-xs-4list-col-sm-4list-col-md-4list-col-lg-4list-col-xl-4
list-col-xs-6list-col-sm-6list-col-md-6list-col-lg-6list-col-xl-6
list-col-xs-12list-col-sm-12list-col-md-12list-col-lg-12list-col-xl-12

Sitefinity Layout Editor

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.  

Sample Layout Editor with a 2 column layout

image of content added to layout area

Learn more about the Layout Editor

HTML & pre-written classes

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.

On this page: