equal height columns in gutenberg

The Columns are using flexbox. The default for flexbox is to stretch the columns to be the same height. The flexbox is set to wrap so if there isn’t enough room on that row to display all the columns it will wrap to the row below. The column that wraps below will change heights because it is the only column on that row. So the column will be the height of the content. The columns are all the same height as long as they do not wrap. If it wraps the height of the columns will be the height of the tallest column on that row. You could add some custom CSS to force a min height using min-height:<<size>>px.

If you want to see it for yourself just add a different background color for each column using the list viewer. You will see the columns are the same height.

Hi @mrtom414,
thank you for the reply.
Each column has a white background, with the column on top of an image background.
And each column is a different height.
I can make them same height by adding an empty paragraph block but that does seem rather clumsy and inelegant.
This also changes the margin for the button which in each column. When the columns were different heights, both buttons were on the base of the column. Adding an empty paragraph to the shorter column causes the button on the unchanged column (the longer column) to have a margin and so not rest on the base of the column.

The way the columns work is that there is a div with a class of columns that surrounds 2 or more other div with a class of column. The columns div is set as a flexbox container. The div’s with the class of column is stretched to be even. However, The content of the column class will not be affected because the flexbox only affects the immediate children. The div is the same height as long as they are on the same row.

The content in each of the column div will not align with its sibling because they are formatted differently. If you want everything to align you would have to use something like a grid to get them to align perfectly and make their content the same height. If the column class is set to a grid you can define the height of each row in the grid. Grids are like the big brother of flexboxes.

You could also do it with javascript but it would be more involved. To answer your question the columns are the same height. But, The content in the columns is not. There is no way to predetermine what will go in a column. Hopeful, I didn’t confuse you.