Cockpit Grid: using 1/3 and 2/3 Columns


quick question. Is there a way to use Column-Widths like 1/3 and 2/3? Similar to the feature, when arranging fields in a Collection or Singleton, where you can select how much space a field should take.

Just apply the class uk-width-1-3 to a child of a grid.


I’m not using the uikit in my frontend. Furthermore i find it rather uncomfortable for a customer to maintain columns with classes. Can’t there be just the functionality we use to order fields but for the grid/columns? I could of course tell my customer to apply some classes + use the uikit in my frontend or write some logic to parse classes to column width but as i said i am not a huge fan of this.

I don’t understand… Are you talking about something inside cockpit or are you asking how to write the grid css for your frontend? Or maybe… do you mean the grid component of a layout field?

Hey Raffaelj,

sorry, i reread my posts and found it confusing myself.

I mean the grid-component you can use from the layout-component addon, if i’m not mistaken.

Greetings and thanks for your help in advance

The grid component is available without the LayoutComponents addon, but you can overwrite core components or create new ones with that addon.

Unfortunately columns aren’t treated as separate components, so there is no “clean” way to change their behaviour.

I fiddled a bit, because I would like to add that feature to my BlockEditor addon (wip) and I found a way to change the widths. Just copy the modified file to config/tags/field-layout-grid.tag and you are able to set the widths.

Be aware, that overwritten fields won’t receive updates and that they can interfere with addons, that also try to overwrite the same field/component.

1 Like