Block-beta diagram with hexagon block should span but only centers

[rtschaffer]

Description

Description
When using the block-beta diagram in Mermaid, a block intended to span multiple columns (using the :N syntax, e.g., :3 and hexagon shape, e.g., C{{lable}}:3) does not visually expand to fill the column space. Instead, the block is centered below the preceding row.

Steps to reproduce

Render the diagram using the code example below in any Mermaid renderer (tested on v11.6.0).
Using C1["Element"]:3 rendered as expected (spanning 3 columns).
Adding underscore and additional text (e.g. C1{{"_________Element___________"}}:3) resulted in a condensed diagram with the hexagon contained to the middle column.
Other shapes were tried and the results varied. For example, round edge works but stadium does not.

Screenshots

Screenshot of actual behavior:

Screenshot with expanded label:

using C1["Element"]:3

same issue (centered not spanned) using C1<["Element"]>(x):3

Code Sample

block-beta
columns 3
  A1{{"Opening tag"}} space A3{{"Closing tag"}}
  B1["<tagname>"] B2["content"] B3["</tagname>"]
  C{{"Element"}}:3

Setup

Mermaid v11.6.0

Chrome (using Mermaid playground) and VS Code

Suggested Solutions

I read through the syntax and did not readily spot a syntax conflict with other shapes and methods. The use of a colon and a number seems consitant but fails with the syntax for many shapes.

If this is not a syntax bug I imagine a different approach is needed. Looking at how columns and rows are layed out in other languages, perhaps taking an example from CSS grid-template-areas may work. In this example, the block ID is used to define spans. This would work well for row spans as well:

block-beta
columns 3
  A1{{"Opening tag"}}     A2:space     A3{{"Closing tag"}}
  B1["<tagname>"]     B2["content"]     B3["</tagname>"]
  C:span     C{{"Element"}}     C:span

At the risk of adding complexity, I suggest moving to more explicit syntax to avoid interpreter ambiguity errors.

In the above suggestion, I've used :space with an id in the open middle cell of the first row (explicitly establishes existance of a cell, though blank using the space syntax) and :span for two cells of the third row but with common ID. This uses more explicit syntax acknowledging the existance of each cell and its placement. I don't know if :space is required here where the cell is explicitely recognized by the ID, leaving it as A2: may work where space would have been required using more implicit methods. However, :space and :span would be more explicit syntax. I feel that this syntax keeps with the simpler nature of Mermaid when compared to CSS which may require definition beyond grid-template-areas to fully define the grid. Where Mermaid is intended for diagramming, this syntax may still allow for connectors and other elements.

Other ideas involve borrowing from Markdown:

block-beta
columns 3
|  A1{{"Opening tag"}}  |  A2:space  |  A3{{"Closing tag"}}  |
|  B1["<tagname>"]  |  B2["content"]  |  B3["</tagname>"]  |
|  C:span | C{{"Element"}}  |  C:span  |

Additional Context

If this is intended behavior it seems counter intuitive. I did a search through issues and found a few that seemed related but did not address the inconsistant behavior from one shape to another. The topics found also had no history beyond initial posting. This report may have similarities to #6316, #5406 and possibly #5423, or may be related to the same bug reported by those posts.