<p>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. </p>

<p>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. </p>

<p>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.</p>

<p>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.</p>

<p>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.</p>

CC BY-SA 3.0
2015-12-08T23:45:03.307Z
2015-12-08T23:50:43.303Z
2015-12-08T23:50:43.303Z
RitterKnight
<p>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.</p>

CC BY-SA 3.0
2015-12-08T09:22:02.423Z
2015-12-08T11:01:01.467Z
2015-12-08T11:01:01.467Z
carlcs
<p>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, ...).</p>

<p>Typically they need to wrap rows in a <code>&lt;div class="row"&gt;</code> and columns in e.g. a <code>&lt;div class="column-4"&gt;</code>. 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?</p>

CC BY-SA 3.0
2016-03-21T22:11:49.457Z
This is where nested matrix fields would come in real handy (not to mention all the other cases where it would be awesome for templating).
Anders
CC BY-SA 3.0
2016-03-22T20:13:04.820Z
@Anders: Nested Matrix is doable now... you've got the [Super Table](https://github.com/engram-design/SuperTable) plugin, and the [Matrix Group](https://github.com/benjamminf/craft-matrix-group) plugin. Granted, they're 3rd party solutions, but they definitely solve the problem.
Lindsey D
<matrix><css><layout>
What are best practices for using Matrix fields to establish a grid layout
# What are best practices for using Matrix fields to establish a grid layout

(Asked by: username_0 on 2015-12-08)

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  and columns in e.g. a . 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?

**Tags:** matrix, css, layout

> **Comments:**
> **username_1**: This is where nested matrix fields would come in real handy (not to mention all the other cases where it would be awesome for templating).  
> **username_2**: @username_1: Nested Matrix is doable now... you've got the [Super Table](https://github.com/engram-design/SuperTable) plugin, and the [Matrix Group](https://github.com/benjamminf/craft-matrix-group) plugin. Granted, they're 3rd party solutions, but they definitely solve the problem.  

---

## 2 answers

### Answer by username_3 on 2015-12-08. Score: 2

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 by username_4 on 2015-12-08. Score: 1

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.


---

