Masonry style text boxes?

I like your avatar!
What you describe is what the browser does with every page. It’s all about text boxes. The default for every box is 100% width and a display type of block, though, so you don’t really see that it’s happening.
So you can define your “box” with CSS as having a background color, padding, maybe a shadow, and give it a width and your choice of display: inline-block or grid or flex (and there are inline versions of those also). If you choose the right one, it will handle the different window sizes, or you can change your widths at smaller windows. That CSS would be a class name that you can add to any block.

But it’s not really Masonry, because that is images that can be resized to fit into different configurations to make a solid wall of images.

Thanks Joy!

When I’m in the Block Editor, I can’t see how I can define the block as a different display style.
Do I add a CSS class in the advanced tab on the block settings?, or create a custom style for the paragraph which I can then select when I’m editing the block?

CSS can be added inline, but if you want to use it on various pages, you should define a class either in a child theme stylesheet, or the Customizer Additional CSS, or a plugin that loads your CSS globally. Then you can add that class to whichever block.

(The editor is for editing content, not really for entering styles, although the classic editor and block has a “Formats” button that themes or plugins can add to easily, so you can apply styles or classes easily. I opened an issue for the block editor long ago that this is still needed, but so far it’s not there.)

With that said, the block editor is still working on how best to show variations and patterns, and once they get that into core, the user can use those, and possibly save their own for reuse.

The class I want to replicate, on the posts page where they all play nicely as masonry style,, on that page is class ‘post-content’
Yet my efforts to define columns or blocks of any sort as post-content in the Additional Css Advanced box doesn’t do anything.
It’s crazy the amount of time I’m putting in to just getting three columns of smaller text does, that all tessellate when the page is resized, just like the blog page does!

If you could explain like I’m really dumb I’d really appreciate it!

HTML is what makes up your page. It has elements like p for paragrpahs, a for anchors (links), div for dividing things into arbitrary parts. and others. Each element can have attributes like class names. The elements are arranged in nested manner to accomplish your layout.

The CSS has rules to apply to the HTML. For it to take effect, the selector has to match the HTML. Rules can apply to multiple parts of the HTML, and the HTML can be styled by multiple rules. When there are multiple rules for the same property, the most specific selector one is applied. If two are the same selector, the last one written is applied. (that’s the Cascade — the C in CSS)

To make your new box style, you should use a new class name, so it won’t interfere with the theme’s styling, and you can put it where you want. Otherwise your styles will have to overcome different things on different pages, and you have to add a lot of existing names to apply it on different pages.

So the CSS would be like

.myown-box { background color: white; border: 1px solid gray; padding: 0.5em;
  width: 30%; display: inline-block; vertical-align: top; margin-right: 0.6%; }
@media (max-width: 720px)  {	/* adjust the number for your theme */
  .myown-box { width: 100%; margin-right: 0; }
}

And you put the text myown-box into the Class input for your block.
In CSS selectors, classes start with a dot, IDs start with a #, and a space indicates nesting.

When you try to put the post-content class on other things, it mislabels it and probably gets styles you don’t want. Besides, you were having trouble because most of Masonry is done by Javascript, and it probably wasn’t loaded on that page.

Thanks again Joy! I have now got it working well enough for me. I think a lot of the niceness I was trying to get working was actually Javascript like you say, simply stealing the class names from the page in question didn’t replicate it quite!
But with your help I’ve at least got it good enough!
Thanks again