Issues when implemented with Bootstrap

I've set up an example [here](https://codepen.io/jongc/pen/WXyWPG).

1. The gutter isn't always correct especially when the page first loads. Sometimes some bricks are right up against each other. This issue is mostly seen with the vertical spacing between the bricks. The gutters seem to fix themselves when I resize the window.
2. Can we have widths work when set in percentages via CSS? I tried but it didn't work. You will see in the codepen that I controlled widths with JS instead to set exact pixels.
3. When I resize between different screens, the responsiveness of the cards isn't that great. I know ideally, users don't resize their browsers on devices the way developers do, but when I view this on a device that can rotate, like a mobile phone or tablet, I see the issue. Sometimes the main container (the wall) is squashed, giving the bricks the same treatment.

Sorry if I missed something in the documentation that could have fixed these issues. The example and documentation didn't go into a lot of details so it took me a while to get it working the way I have it in the codepen. If someone could provide some guidance, it would be greatly appreciated.

Start with the linked CodePen example and compare its Bootstrap setup with the project's documentation. Reproduce the initial-load, percentage-width, and resize problems, then verify that gutters, responsive card sizing, and the main container remain correct across the reported viewport changes.

Written by the indexing model from the issue text.