Image and video grids have a lot of flexible uses. For example, art teachers may want to display art in a gallery style for students to browse. Because you can link images to other Canvas content or external content, you could also provide more information about each of those pieces of art.

This page details the steps to creating a grid of images and videos. It builds upon the Columns page, so read that page first and get a feel for how columns work before you continue here.

IMAGE GRID

The image grid can be combined with the Image styles from this design library.

To ensure that your image grid rows are consistent, use a program such as Adobe Photoshop Express to crop any images that will appear in a row to the same aspect ratio.

Image grid rows can be copied and pasted in the Visual Editor. To replace a placeholder, add your image immediately before or after it, then delete the placeholder image.

While the selections here are for individual rows, you are welcome to add as many rows as you want. Just paste the rows multiple times, then remove the selection bars.

Start of Selection

End of Selection

Start of Selection

End of Selection

VIDEO GRID

Video grid rows can be copied and pasted in the Visual Editor. To replace a placeholder, add your video immediately before or after it, then delete the placeholder video.

While the selections here are for individual rows, you are welcome to add as many rows as you want. Just paste the rows multiple times, then remove the selection bars.

Start of Selection

End of Selection

Start of Selection

End of Selection