Css 如何在使用Bootstrap4和Flex制作的笛卡尔平面中拉伸网格项？

我需要用bootstrap4和Flex实现一个笛卡尔平面。所需的输出类似于下图：

该平面由10x10矩阵组成。此外，我需要一个包含x标签的行和一个显示y标签的列

这是我的密码：

<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
    <div class="d-flex flex-row">
        <div class="p-2 align-items-stretch">1</div>
    </div>
    <div class="d-flex flex-column">
        <div class="p-2">1</div>
        <div class="p-2">2</div>
        <div class="p-2">3</div>
        <div class="p-2">4</div>
        <div class="p-2">5</div>
        <div class="p-2">6</div>
        <div class="p-2">7</div>
        <div class="p-2">8</div>
        <div class="p-2">9</div>
        <div class="p-2">10</div>
        <div class="p-2 align-items-stretch">11</div>
    </div>
    <div class="d-flex flex-column">
        <div class="p-2">1</div>
        <div class="p-2">2</div>
        <div class="p-2">3</div>
        <div class="p-2">4</div>
        <div class="p-2">5</div>
        <div class="p-2">6</div>
        <div class="p-2">7</div>
        <div class="p-2">8</div>
        <div class="p-2">9</div>
        <div class="p-2">10</div>
    </div>

    <!-- the same for the other 8 rows -->
</div>

实际结果是：

我有两个问题：

行号11应拉伸到最后一列

网格项应根据可用空间调整其大小 容器的顶部

我怎样才能达到这些目标？谢谢

您可以像这样使用

演示：

Y
1.
2.
3.
4.
5.
6.
7.
8.
9
10
还有9排。。。
x

.p-2 {
    border: 1px solid lightgray;
}

.p-2:before {
    content:'';
    float:left;
    padding-top:100%;
}

<div class="container text-center">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="row">

                <div class="col-1">y</div>
                <div class="col-11">
                    <div class="row">
                        <div class="col">1
                        </div>
                        <div class="col">2
                        </div>
                        <div class="col">3
                        </div>
                        <div class="col">4
                        </div>
                        <div class="col">5
                        </div>
                        <div class="col">6
                        </div>
                        <div class="col">7
                        </div>
                        <div class="col">8
                        </div>
                        <div class="col">9
                        </div>
                        <div class="col">10
                        </div>
                    </div>
                    <!--/row-->
                    9 more row ...

                    <div class="row">
                        <div class="col">x
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--container-->
</div>