how to create a masonry grid of 16 boxes?

[lilianedias]

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

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.

[awilliams]

Hi  @lilianedias  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!

[jasond]

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 

[jasond]

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

[kmeeusen]

Hi  @lilianedias 

You might want to check out this great idea for image mapping from  @jnassif   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

[Robbie_Grant]

 @lilianedias ,

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