Grid | Canvas Content Styling Guide

Canvas includes a legacy responsive grid system based on rows and columns. Columns adapt to different screen sizes using classes such as col-xs-12 (full width on small screens) and col-md-4(four columns wide on medium screens). These classes are part of Canvas' older CSS and still work in this Canvas instance, but they may change in future if the underlying theme is updated.

You can also build layouts using native CSS Grid directly in inline styles. This does not rely on Canvas' legacy CSS. Support depends on the learner's browser, but current browsers handle CSS Grid well.

Useful references

Two-column layout (Canvas legacy grid)

This example shows an 8/12 main column and a 4/12 side column using Canvas' grid classes. On small screens they stack vertically. Backgrounds are added here for visibility.

Main column (8/12)

Uses col-xs-12 col-md-8. Full width on small screens.

Side column (4/12)

Uses col-xs-12 col-md-4. Stacks below on smaller screens.

<div class="content-box">
  <div class="grid-row">
    <div class="col-xs-12 col-md-8">
      <div style="background: #eef; padding: 0.75rem;">
        <h5>Main column (8/12)</h5>
        <p>Uses <code>col-xs-12 col-md-8</code>. Full width on small screens.</p>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div style="background: #eef; padding: 0.75rem;">
        <h5>Side column (4/12)</h5>
        <p>Uses <code>col-xs-12 col-md-4</code>. Stacks below on smaller screens.</p>
      </div>
    </div>
  </div>
</div>

Three-column layout (Canvas legacy grid)

This layout uses three equal-width columns (col-xs-12 col-md-4). On smaller screens each column becomes full width and stacks vertically.

Column 1

Uses col-xs-12 col-md-4.

Column 2

Also uses col-xs-12 col-md-4.

Column 3

Same width as the others.

<div class="content-box">
  <div class="grid-row">
    <div class="col-xs-12 col-md-4">
      <div style="background: #eef; padding: 0.75rem;">
        <p><strong>Column 1</strong></p>
        <p>Uses <code>col-xs-12 col-md-4</code>.</p>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div style="background: #eef; padding: 0.75rem;">
        <p><strong>Column 2</strong></p>
        <p>Also uses <code>col-xs-12 col-md-4</code>.</p>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div style="background: #eef; padding: 0.75rem;">
        <p><strong>Column 3</strong></p>
        <p>Same width as the others.</p>
      </div>
    </div>
  </div>
</div>

Nested grid (Canvas legacy grid)

A column can contain its own grid. In this example, the nested columns use col-xs-6, so they remain side by side at 50% width each. The Canvas legacy grid is fixed to its predefined breakpoints; you cannot change how the grid behaves using inline styles alone.

Main column with nested content

This column contains a nested grid:

Nested 1 (6/12)

Nested 2 (6/12)

Side column

This column sits beside the nested example.

<div class="content-box">
  <div class="grid-row">
    <div class="col-xs-12 col-md-8">
      <div style="background: #eef; padding: 0.75rem;">
        <h5>Main column with nested content</h5>
        <p>This column contains a nested grid:</p>
        <div class="grid-row">
          <div class="col-xs-6">
            <div style="background: #def; padding: 0.5rem;">Nested 1 (6/12)</div>
          </div>
          <div class="col-xs-6">
            <div style="background: #def; padding: 0.5rem;">Nested 2 (6/12)</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div style="background: #eef; padding: 0.75rem;">
        <h5>Side column</h5>
        <p>This column sits beside the nested example.</p>
      </div>
    </div>
  </div>
</div>

Full-width section (Canvas legacy grid)

A full-width row can be created using col-xs-12. The example below uses a highlighted background for visibility.

Full-width section using col-xs-12.

<div class="content-box">
  <div class="grid-row">
    <div class="col-xs-12">
      <div style="background: #def; padding: 1rem;">
        <strong>Full-width section</strong> using <code>col-xs-12</code>.
      </div>
    </div>
  </div>
</div>

Modern CSS Grid with inline styles

You can also build layouts using native CSS Grid directly in inline styles. This does not rely on Canvas' legacy CSS and gives you more control over how content wraps on different screen sizes.

The examples below use the same pattern: display: grid, grid-template-columns with repeat(auto-fit, minmax(...)), and a gap between items.

Two-column responsive grid (inline styles)

This example uses auto-fit and minmax so that columns wrap when there is not enough space. On wider screens you will see two columns; on narrow screens they stack.

Main content

This is the first column. It uses CSS Grid with inline styles and a minimum width of 260px.

Supporting content

When the available width is too small for two 260px columns, the items stack vertically.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem;">
  <div style="background: #eef; padding: 0.75rem;">
    <h5>Main content</h5>
    <p>
      This is the first column. It uses CSS Grid with inline styles
      and a minimum width of 260px.
    </p>
  </div>
  <div style="background: #def; padding: 0.75rem;">
    <h5>Supporting content</h5>
    <p>
      When the available width is too small for two 260px columns,
      the items stack vertically.
    </p>
  </div>
</div>

Auto-fit card layout (inline styles)

This grid uses auto-fit and minmax so that cards wrap automatically, showing two or more columns on wider screens and a single column on small screens.

Card 1

Responsive card using CSS Grid.

Card 2

The grid fits as many cards per row as space allows.

Card 3

On narrow screens, these cards stack vertically.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;">
  <div style="background: #eef; padding: 0.75rem;">
    <h5>Card 1</h5>
    <p>Responsive card using CSS Grid.</p>
  </div>
  <div style="background: #eef; padding: 0.75rem;">
    <h5>Card 2</h5>
    <p>The grid fits as many cards per row as space allows.</p>
  </div>
  <div style="background: #eef; padding: 0.75rem;">
    <h5>Card 3</h5>
    <p>On narrow screens, these cards stack vertically.</p>
  </div>
</div>

Header / main / aside layout (inline styles)

This layout uses a simple wrapper for the header and a nested CSS Grid for the main and aside areas. The inner grid uses auto-fit and minmax, so the main and aside sections wrap in a similar way to the card example.

Header area — this block always spans the full width above the content grid.

Main content

This is the main content area. On wider screens it appears beside the side panel.

Side panel

This section sits next to the main content when there is enough space, and stacks below on narrow screens.

<div>
  <div style="background: #ddeeff; padding: 0.75rem; margin-bottom: 1rem;">
    <strong>Header area</strong> — this block always spans the full width above the content grid.
  </div>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem;">
    <div style="background: #eef; padding: 0.75rem;">
      <h5>Main content</h5>
      <p>This is the main content area. On wider screens it appears beside the side panel.</p>
    </div>
    <div style="background: #def; padding: 0.75rem;">
      <h5>Side panel</h5>
      <p>
        This section sits next to the main content when there is enough space,
        and stacks below on narrow screens.
      </p>
    </div>
  </div>
</div>

Accessibility notes

Keep the reading order in the HTML logical (top to bottom, left to right). Do not rely on visual column position alone to convey meaning.
Avoid very complex nested grids with many columns. They can become difficult to read on small screens and for screen reader users.
Test layouts in Student View and on different screen sizes to confirm that columns stack in a readable order and that content does not become cramped.
Use headings and clear labels within grid items so that the structure is understandable even if columns stack into a single column.