Set custom widths on columns in Volto Blocks Grid

[pigeonflight (David Bain (Will Theme Plone Sites))]

What's the best way to adjust the width of a column in volto blocks grid?
I'm trying to achieve this layout by combining tabs and accordian in a volto-blocks-grid

by default the columns are all the same width.

[pigeonflight (David Bain (Will Theme Plone Sites))]

I may switch to eea volto-columns-block. It looks more flexible:

GitHub - eea/volto-columns-block: A Volto block that provides columns of blocks

It offers more grid layout arrangements out of the box.

[rnunez (Rafael Nunez)]

I use volto-columns-block for the same reason, volto blocks grid not only it does not allow you set different width on the columns but it also limits the type of block types you can add there.

[sneridagh (Victor Fernandez de Alba)]

volto-grid-block can be customized too, introducing classNames for styling (for changing the column width), adding more columns or the type of blocks used. For the latter see the README or Plone docs. In fact, is very similar to the core one (in Volto 17 onwards).

It lacks of the templating system and chooser of volto-columns-block though.

[pigeonflight (David Bain (Will Theme Plone Sites))]

Thanks @sneridagh and @rnunez I think volto-columns-block is better for our current usecase

[djay (Dylan Jay)]

@sneridagh

volto-grid-block can be customized too, introducing classNames for styling (for changing the column width), adding more columns or the type of blocks used. For the latter see the README or Plone docs. In fact, is very similar to the core one (in Volto 17 onwards).

It lacks of the templating system and chooser of volto-columns-block though.

You missed the most important difference between grid-block and columns-block. That is columns. Columns allow you to put more than one block vertically in a cell (e.g 2+ paragraphs).
You could in theory create a column block that could be added inside a grid to allow this but the UI breaks down for containers inside containers as we have previously discussed so that is not really a workable solution.