Create Columns in Canvas

“That’s slick - like a newspaper!” - your readers

Here is a quick an snazzy interaction for you. With just a little code, you can add columns to your Canvas pages.

CSS - the spice of life

You will need to add the CSS code to your Canvas instance. You can create multiple CSS classes if you would like to distinguish 2 columns or more, or if you would like to specify different column widths. The code below provides 3 columns and each column will be no smaller than a width of 200pixels. When the columns are smaller than 200px, then 3 columns will become 2. On a small screen, the columns may appear as a single column in portrait mode and multiple columns on landscape mode if the screen size allows for the real estate.

/*
*
* ==========================================
* Columns
* ==========================================
*
*/

/* This is a 3 column container.  Each column will be no smaller than 200px. */


.col3 {
  padding: 15px;
  columns: 200px 3;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #2275C8;
}

You can start with this code. Adjust the column width and number, tinker with the column-gap (the space between columns) to see what you prefer, and alter the column-rule. Try a 1px solid line, or a 10px dotted color. Or perhaps you would prefer no column-rule and just have empty space. Come up with your own combinations.

Give this a try and have some fun!

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas