What are best practices for using Matrix fields to establish a grid layout

Question

I am using a Matrix field for content blocks like heading, text, images, ... similar to the HappyLager demo site. Now I would like to combine this with common CSS grid systems (e.g. from Bootstrap, Foundation, ...).

Typically they need to wrap rows in a <div class="row"> and columns in e.g. a <div class="column-4">. The easiest way would be to provide dummy matrix blocks for opening rows and columns (with a radio-button field to specify column with) and blocks for their corresponding closing tags. But of course the user should not forget to close the blocks otherwise the layout breaks. Is there a better way to do this?

Answer 1

Easiest way I can think of is just to use some math. If your grid columns need to add to 12, keep a current column count while iterating over the matrix blocks.

I'd imagine you'd want your content blocks have some sort of built-in "column" width to begin with... a text content block might be 8 columns and an image would be 4. Or 6 and 6.

If the current block + the previous block adds to over 12, close the current row and start a new row. Practically speaking, the actual column count doesn't really matter to a user, it's creating a specific layout... whether that's 8 + 4 or 6 + 6, etc. The grid is kind of a formality, really, to keep everything sane.

You'd probably have to look ahead and see what the next block or 2 look like to get an idea of your column count or to adjust it to make sure the user isn't putting in 2 images or 2 half blocks, for example. If they are, then the image could automatically start its own row or something. If you're feeling ambitious, the last one in the row could take up more or less space, depending on how you want the layout to look. IIRC I think that's how the Happy Lager site does it, if you put two images next to each other, they adjust a bit.

I've experimented a bit with this as well. If you're trying to save the user from himself, it's pretty rare you want to have an arbitrary sized text block... like 2 columns or whatever. I can see where you might want to have a pull quote or something that might take up that size, so define that instead.

Answer 2

You could use the approach you already suggested, but combine it with a grid that doesn't require to close rows, but automatically wrap into the next row if there's not enough space left. There's two common ways to achieve such a grid cell behavior, inline-blocks and flexbox with flex-wrap set to wrap.