Gutenberg: Can't resize columns in Columns Block

[maddisondesigns]

It's not currently possible to resize the columns in the columns block. The ability to have columns is imperative for providing more flexible layouts. If you can only add equal width columns though, it makes it extremely limiting.

Ideally, you should be able to specify a percentage width for each column. At a bare minimum though, you should at least be able to select a different layout such as:

If there's 2 columns: 50/50, 25/75, 75/25
If there's 3 columns: 33.3/33.3/33.3, 50/25/25, 25/25/50, 25/50/25
If there's 4 columns: 25/25/25/25, 40/20/20/20, 20/20/20/40
etc...

_Gutenberg 3.0.1_

[chrisvanpatten]

Further context/previous related discussions: #4900, #6650, #6461, #4902, #5886, #6048, #219

[rickcurran]

The ability to define this via various responsive classes defined in CSS would definitely be useful.

[sylvaincordiere]

This request have been ask many time.
Is there any decision taken by gutenberg team ?
Is there any plan to add this in wordpress 5, later or never

[ZebulanStanphill]

I agree that it would be nice to see a decision on whether the Columns block will be getting non-equal width and responsive columns before WordPress 5.0 or not. In its current state, the Columns block, while definitely better than it was initially, is still useless for nearly any practical applications – primarily due to the lack of responsiveness, though non-equal width columns are almost as essential.

[designsimply]

Thank you for the feedback! It's a good question. Since the Columns block is still in beta and because the question has been asked in a few other places, I am closing this issue in favor of https://github.com/WordPress/gutenberg/issues/6048 which I believe should cover this issue once a decision has been made there.

[emar]

Just started usin Gutenberg and I like it,
I was creating two columns and realized I can't change their width,
Another editor I'm using to change width, you'd just drag the border of the block/column to change it.
I can see gutenberg getting like Page Builder by SiteOrigin.. well I hope so.. great stuff!

Sounds on WP

[designsimply]

@emar the Phase 2 Scope & Features, which are currently underway, mention "resizing columns in the column block" so that is a planned update.

You might also like to follow the discussion in https://github.com/WordPress/gutenberg/issues/4900 about a Section/Container block which is also mentioned as a planned update for Phase 2.

[emar]

Thanks I'll keep an eye open for further releases, sound great works nicely.
The great thing is I'll have no need for two extra plugins to have a custom editor... soon.

[designsimply]

I love hearing that! Hey, if there's any chance you'd like to help test one or two things from new releases of Gutenberg, please check out https://make.wordpress.org/test/. 😊

[kevinckc]

A workaround to resize (width) with column

Conside the column structure to be below and than add a custom css class "w-two-one" which defined in theme css file:

<div class="wp-block-columns w-two-one ...">
    <div class="wp-block-column">...</div>
    <div class="wp-block-column">...</div>
</div>

In the theme CSS, something like (btw, margin-left:0 is optional):

.wp-block-columns.w-two-one {}
.wp-block-columns.w-two-one .wp-block-column { flex-basis: 33.3%; margin-left: 0; }
.wp-block-columns.w-two-one .wp-block-column:first-child { flex-basis: 66.6%; }

[bkline]

I am closing this issue in favor of #6048 which I believe should cover this issue once a decision has been made there.

Unfortunately, that ticket has been closed without addressing this issue.

[bkline]

How do I reopen this issue?

[gbwashleybrown]

This still is an issue?

[ZebulanStanphill]

@gbwashleybrown The issue was fixed a little while ago. You can change column widths in the latest version of the Gutenberg plugin. The changes won't come to WordPress core until WordPress 5.3, though.

[My1]

okay. well I am on 5.3.2 and while I do get a few options for cols when creating them there's still 2 small issues:
1) you dont have a lot of control over the sizes
2) I have found no way to change the size after the fact

[vladoa]

One issue I have with the columns is that if I choose to have 4 columns, there is no way for me to set the following:
17/33/33/17 or 10/40/40/10

Every time I set the middle two columns to specific width (let's say 33), Gutenberg recalculates the width of the rest of the blocks, making it impossible to adjust the values to all 4 columns.

Second thing is that they look horrible within the editor. Gutenberg is far too narrow for managing these columns. If I choose to have 6 columns then it gets ridiculously narrow. A popup to adjust columns would be an elegant solution to this problem.

[My1]

well 25/50/50/25 is not something you can really do percentage-wise as that is bigger than a hundred.

for a 1/2/2/1 ratio you rather have 17/33/33/17

[vladoa]

Sorry, bad math. I updated my comment. But you get what I mean, right?

[ZebulanStanphill]

@vladoa There is currently a PR that would fix the issue you are describing: #19515.