Understanding Masonry plugin for elements with different widths

When it comes to responsive design, the fixed widths changes to percentages. Since, in my last Masonry tutorial I didn't used the option of columnWidth because of same width of elements but if elements have different widths then columnWidth becomes a mandatory option to use or else the plugin doesn't works. Have a look:
Suppose a layout having elements of different heights and widths (in percentage). If heights are different so it is necessary to use Masonry but for different widths specially in percentages makes problem. Many of us doesn't understand the concept of columnWidth in first glance.

Read More: How to use Masonry for intermediate users in Blogger
Look out the image below that shows the concept of columnWidth.

If all the elements have same width, doesn't matter percentage or fixed, then it is not necessary to have this option but according to my science, elements with different width could make a problem.

The property of columnWidth contains a width of a column. If this property is not defined then the column width is taken from the outer width of element which works sometimes. But the cases are their when defining this option is the only solution.

Check this pen which have different fixed widths but each of them are multiple of 60 and that is the columnWidth; that is how we implement columnWidth on them.

See the Pen Masonry - columnWidth by David DeSandro (@desandro) on CodePen.

Now check out the same situation with percentages, same method used here of using multiple of the smallest element. Let say if you have an element having outer width of 25% then other elements could have total outer width of 25%,50%,75% and 100%. While other sizes might do some mess up.

See the Pen Masonry - columnWidth element sizing by David DeSandro (@desandro) on CodePen.