How to make nested subgrid paint faster in chrome? or how to make horizontal level align orgChart?

Question

I want to make orgChart with requirements:

• horizontal level align
• expandable node
• node height base on same level node heightest content
• vertical text
• clickable node

I use the plugin vue-org-tree, and the horizontal level align is not support, so I have to do some modification.

the html from the plugin is like:

.org-tree[display=table] #wrapper
  .org-tree-node[display=table-cell] #root-node
    .org-tree-node-label
    .org-tree-node-children[display=table]
      .org-tree-node[display=table-cell] #nodeA
        .org-tree-node-label
        .org-tree-node-children[display=table]
          .org-tree-node[display=table-cell] #nodeC
            .org-tree-node-label
            .org-tree-node-children[display=table]
      .org-tree-node[display=table-cell] #nodeB
        .org-tree-node-label
        .org-tree-node-children[display=table]
          .org-tree-node[display=table-cell] #nodeD
            .org-tree-node-label
            .org-tree-node-children[display=table]

I want to make sibling node(nodeC and nodeD) align, so I change the wrapper to grid and node to subgrid, but it become so slow on chrome(ok on firefox)

In devtool Performance, most of the time is on Layout.

did I use the subgrid wrong? or did there have other way to make it work?

display table	display grid

reproduce: code pen

thanks for response :D