Jsf PrimeFaces中的面板网格布局

我想要快照中所示的

（或

）布局

以下代码

<p:panelGrid style="width: 100%;">
    <p:row>
        <p:column rowspan="9">a</p:column>
        <p:column rowspan="7">b</p:column>
        <p:column>c</p:column>
    </p:row>

    <p:row><p:column>d</p:column></p:row>
    <p:row><p:column>e</p:column></p:row>
    <p:row><p:column>f</p:column></p:row>
    <p:row><p:column>g</p:column></p:row>
    <p:row><p:column>h</p:column></p:row>
    <p:row><p:column>i</p:column></p:row>
    <p:row><p:column>j</p:column></p:row>
    <p:row><p:column>k</p:column></p:row>
</p:panelGrid>

A.
B
C
D
E
F
G
H
我
J
K

显示如快照中所示的布局

如何实现第一个快照中所示的布局？

        <p:panelGrid style="width: 100%;">
            <p:row>
                <p:column rowspan="7">a</p:column>
                <p:column rowspan="5">b</p:column>
                <p:column>e</p:column>
            </p:row>

            <p:row>
                <p:column>f</p:column>
            </p:row>

            <p:row>
                <p:column>g</p:column>
            </p:row>

            <p:row>
                <p:column>h</p:column>
            </p:row>

            <p:row>
                <p:column>i</p:column>
            </p:row>

            <p:row>
                <p:column>c</p:column>
                <p:column>j</p:column>
            </p:row>

            <p:row>
                <p:column>d</p:column>
                <p:column>k</p:column>
            </p:row>

        </p:panelGrid>

A.
B
E
F
G
H
我
C
J
D
K

说明：

每一行都会尝试将自己放在前一行的下面，因为前一行有足够的空间（其中一列没有跨越多行）

因此，在第一行之后：下一行将放置在以下位置：

但是，由于您希望第6行和第7行有2列，因此需要向它们添加第二列

---

希望这能让它变得清晰一点。

这是可行的，但我不明白背后的逻辑：）很高兴我能帮忙，PanelGrid的构造有点棘手，我也花了一些时间来完成它。。。有关解释，请参阅我的更新答案