Layout Field: Span of Blocks

Hi Guys,

Is it possible to span the blocks of a layout field to more than one column or row?
– I am in the need of building a masonry like layout, but custom and not automatic. So a layout field with span options would fit perfectly.

Thanks!

The way I would do it would be like this:

Configure a layout field with different layout options

fields:
  layout:
    type: layout
    layouts:
      - "1/2, 1/2"
      - "1/4, 1/4, 1/4, 1/4"
      - "1/3, 1/3, 1/3"

A layout can also wrap into the next row. Here, you will have one row with 3 columns and another with 4:

      - "1/3, 1/3, 1/3, 1/4, 1/4, 1/4, 1/4"

In each column - here you have 7 - you could put one image or whatever you’d like. Or even multiple blocks.

Without any CSS, those columns will just stack and not be next to each other.
How you can add CSS classes to your columns depending on the width is written here:

If you have a grid of 6, you would have to give every option of spanning as a row option, which is a lot and confusing in my opinion. because you cannot simply switch a layout, and need to re-add the fitting row and move all blocks each by each.

Meanwhile I also came to a different solution:
Allow only one type of row "1/6, 1/6, 1/6, 1/6, 1/6, 1/6"
Add the fields width and height inside a block, type range, min 1max 6
Make the block position: absolute via a plugin and with a height and width style multiple of 100%s.

A more elegant solution for kirby would be to have a real grid layout, where you can drag and drop element spans, but for now this works.