cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

how to create a masonry grid of 16 boxes?

Hello! I would like to create a masonry grid of 16 boxes, where each box corresponds to a theme, as in the image below.

grid

I saw this in this link:

https://ucdenver.instructure.com/courses/336339/pages/sehd-course-progress-template-commencement?mod...

but I do not know how. I tried using bootstrap, but to no avail. Can anybody help me? Thanks.

Tags (1)
5 Replies
Highlighted
Community Member

Hi lilianedias@pucminas.br Welcome to the Canvas Community. While I don't have an answer to your question I am going to share it to the Q & A‌ space where questions have the best chance of being seen an answered. Cheers!

Highlighted
Community Member

Hi Liliane,

There is high likelyhood that the Bootstrap libraries you want to use are already invoked and in use within Canvas. 

<script src="https://du11hjcvx0uqb.cloudfront.net/dist/webpack-production/appBootstrap.bundle-a16c8912e4.js" defer="defer"></script>

The good news is that you may still use Bootstrap....the bad news is that you may have put together some hacky Inline CSS and some extensive trial and errors attempts before you're successful. Feel free to DM me if you have additional questions.

Good luck!
Jason 

Highlighted
Community Member

One more thing....https://canvas.instructure.com/styleguide#grid is a list of Flexbox library for grids and other awesome StyleGuides available within Canvas. 

Highlighted
Community Coach
Community Coach

Hi lilianedias@pucminas.br

You might want to check out this great idea for image mapping from jnassif@llu.edu  at https://community.canvaslms.com/groups/designers/blog/2017/06/14/image-mapping-for-a-homepage-aka-im... .

Let us know if this will work for you!

Kelley

Highlighted
Community Coach
Community Coach

lilianedias@pucminas.br,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

 

Robbie