Grouping with Canvas Grid

Author: Phil Chambers | Feb 18, 2021 Canvas

If you’re planning on grouping content into multiple columns using a <table>, it is often better to approach it using a Flexbox Grid, which adapts to different screen sizes.

Flexbox Grid 

The Flexbox Grid website describes itself as:

A grid system based on the flex display property.

And that’s exactly what it is! If you go to the Flexbox Grid site, you’ll find that the examples on there are pretty self explanatory. Their first example of a responsive grid looks like this:

<div class="row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4">
        <div class="box">This is where the content would go</div>
    </div>
</div>

Canvas Grid 

So how is this different on Canvas? Well let’s start with the first container: instead of <div class="row">, you would just change this to <div class=“grid-row”>.

What does this do? 

<div class=“grid-row”> is used to create a container with a 12-column grid. You can then use another class for each item within the container to change the widths based on screen sizes.

So let’s try out some of these:

Scenario: A basic responsive layout 

This is the most common request I see from SMEs.
Let’s say you wanted to make 3 columns with text and images inside them. When someone views it on laptop/desktop, you would like the columns to be next to each other horizontally. When someone looks at it from a mobile device, however, you would like the columns to stack vertically. We can do this using three instances of this class: <div class="col-xs-12 col-md-4">. What this is telling the browser is that on an ‘xs’ or extra small screen, the column takes up all 12 of the allocated 12 parts. On a ‘md’, or medium screen, it will only take up 4 of the 12 (remember that we wanted 3 columns and so 12 ÷ 3 = 4). Setting it to 12 on extra small screens like phones will vertically stack all columns within this container as they are set to utilize every part of the screen, not just the 4 parts of it as with the medium screen size.

Here is the full HTML code for that scenario.

<div class="grid-row">
	<div class="col-xs-12 col-md-4">
		<p style="text-align: center;">This is Column 1, Row 1.</p>
	</div>
	<div class="col-xs-12 col-md-4">
		<p style="text-align: center;">This is Column 2, Row 1.</p>
	</div>
	<div class="col-xs-12 col-md-4">
		<p style="text-align: center;">This is Column 3, Row 1.</p>
	</div>
 </div>

Screen Sizes 

The following screen sizes can be applied to the above flex item classes (the col-<screen_size>-<number> part). You can decide if you would like to make visual adjustments to each kind of screen size available.

What else can I do with this? 

There are a few modifications that you can do to code outside of the ones mentioned in the Canvas Style Guide. Try out some of the Flexbox Grid examples and see if Canvas strips it from the code or not!

Unequal Grids 

Of course, you don’t need to have equal grid item sizes. You could split it up so one side is larger than the other - perhaps including a smaller element on the left or right side like this code would generate:

<div class="grid-row">
<div class="col-xs-12 col-md-4">
Something smaller, on the left of a desktop screen.
</div>
<div class="col-xs-12 col-md-8">
Something larger on the right of a desktop screen.
</div>
</div>

Some Additional Sources 

The following websites have a lot of information about using the Canvas implementation of the flexbox grid:

• A look into the older Canvas Style Guide has a section on how the ‘Grid’ works.
  Note that while a lot of this still works, it has been deprecated.
• This 2015 post by MattHanes from the Canvas Community Forums has a nice color-coded guide giving more detail on how to visualize the grid-row code.

Demo