The 12 Column Grid

Setting widths

Our default grid consists of 12 columns per row.

Each .sage-col's width is independently sized using classes in the form of .sage-col-<# of columns>, where <# of columns> is an integer ranging from the minimum number of columns (1) through the maximum number of columns (12).

For example, a three-column wide .sage-col-3 would be one-quarter (25%) the width of one .sage-row, since 3 columns divided by the 12 total columns in the row equals 25 percent.

As a result, four .sage-col-3 columns are needed to fill out one row.

Column combinations

In the example below, each .sage-col example is named with the number of columns it represents. Generally, a single column (.sage-col-1) is too small for content, so .sage-col-2 is the smallest width recommended for use.

Column spacing

Spacing between columns has been predefined at the Sage system level in the _variables.scss file. By default, this is set to sage-spacing(sm) (1rem).

Responsive grid layouts

Viewing the column combinations example above, you may have noticed that the columns display as full-width blocks when viewed at smaller screen sizes. To account for the increased or decreased space available, we can target specific screen sizes (called breakpoints) by modifying the classnames used in each column. This is referred to as responsive design, giving us greater flexibility in our layouts.

Mobile first

There are two primary methods to responsive design: desktop-first and mobile-first. While the full details of these approaches is beyond the scope of this documentation, you should be aware that Sage follows the mobile-first approach wherever possible. This means that base CSS is geared towards small screens/mobile devices, with additional styles added at increasing min-width (minimum width) breakpoints. This can help positively influence both real and perceived performance on mobile devices.

Preventing responsive layouts

At screen sizes below sm (< 545px), all responsive columns will display as full-width, regardless of the breakpoint keyword in use. This behavior cannot be overridden.

If your layout does not follow this pattern and must keep its column structure, you will need to use the classname without responsive keywords, as illustrated in the "setting widths" section.

Naming conventions

Classnames for responsive columns follow this pattern: .sage-col--<breakpoint>-<# of columns>

Here, <breakpoint> is the screen size at which the layout will change, and <# of columns> sets the width of the column, noted in the sections above.

The predefined breakpoints keywords are sm, md, and lg:

Example layouts

Small breakpoint

<div class="sage-row">
  <div class="sage-col--sm-6">Col</div>
  <div class="sage-col--sm-6">Col</div>
</div>

Medium breakpoint

<div class="sage-row">
  <div class="sage-col--md-4">Col</div>
  <div class="sage-col--md-4">Col</div>
  <div class="sage-col--md-4">Col</div>
</div>

Large breakpoint

<div class="sage-row">
  <div class="sage-col--lg-4">Col</div>
  <div class="sage-col--lg-8">Col</div>
</div>

Multiple breakpoints

Auto Width

Hiding and showing content

In cases where content will be hidden or shown at specific screen sizes, classes using breakpoint keywords are available. These classes use sizing from sage-breakpoint() to affect where content is displayed.

Classnames for showing and hiding columns are composed in the following pattern: .sage-col--<breakpoint>-<show or hide>.

As with the naming conventions for responsive columns, <breakpoint> corresponds to the breakpoint keyword, and <show or hide> indicates whether the content should be displayed with this breakpoint.

IMPORTANT: the difference between show and hide is that show displays the content for that specified screen size only, but hide will continue to hide content for all screen sizes below the breakpoint specified. Refer to the chart below for more detail.

Row Alignment

Horizontal Alignment

The horizontal alignment default for each .sage-row aligns columns to the start (left) of the .sage-row container. Alignments will only be visible if the total amount of width taken up by columns is less than the total amount of space.

Supported values: start, center, end, space-between, space-around, and space-evenly.

<%= sage_component SageGridRow, {
  horizontal_alignment: "space-around"
} do %>
  ...
<% end %>

Vertical Alignment

The vertical alignment default for each .sage-row aligns columns to the start (top) of the .sage-row container. Alignments will only be visible if the total amount of height taken up by columns is less than the total amount of space.

Supported values: start, center, end, baseline, and stretch.

<%= sage_component SageGridRow, {
  vertical_alignment: "center"
} do %>
  ...
<% end %>

Column Alignment

Vertical Alignment

The vertical alignment default for each .sage-col aligns to stretch the full height of each respective .sage-row container. Alignments will only be visible if the total amount of height taken up by columns is less than the total amount of space.

Supported values: start, center, end, baseline, and stretch.

<%= sage_component SageGridRow, {} do %>
  <%= sage_component SageGridCol, {
      vertical_alignment: "center"
    } do %>
      ...
    <% end %>
<% end %>