如何构建包含4个不等尺寸区块的Bootstrap网格？

我是Bootstrap新手，想要创建如下所示的网格布局：

以下是我的代码（未达到预期效果）：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous">

        <title>foo</title>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-6 border justify-content-center">
                    Area 1
                </div>
                <div class="col-6 border justify-content-center">
                    Area 2
                </div>
            </div>
            <div class="row">
                <div class="col-6 border justify-content-center">
                    Area 3
                </div>
                <div class="col-6 border justify-content-center">
                    Area 4
                </div>
            </div>

            </div>
        </div>
    </body>
</html>

当前网格渲染效果如下：

请问如何修改代码以实现预期布局（尤其是高度部分）？

修改方案 #

要实现预期的等高布局，直接按以下方式调整代码即可：

修改后的完整代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous">

        <title>foo</title>
        <style>
            .custom-row {
                height: 50vh; /* 每行占视口高度的50%，刚好两行填满整个视口 */
            }
        </style>
    </head>

    <body class="h-100">
        <div class="container h-100 d-flex flex-column">
            <div class="row custom-row">
                <div class="col-6 border d-flex align-items-center justify-content-center">
                    Area 1
                </div>
                <div class="col-6 border d-flex align-items-center justify-content-center">
                    Area 2
                </div>
            </div>
            <div class="row custom-row">
                <div class="col-6 border d-flex align-items-center justify-content-center">
                    Area 3
                </div>
                <div class="col-6 border d-flex align-items-center justify-content-center">
                    Area 4
                </div>
            </div>
        </div>
    </body>
</html>

关键修改说明

• 给body和container添加h-100类，让容器占满整个视口高度；同时给container加d-flex flex-column，让两行垂直排列并撑满容器空间。
• 自定义.custom-row类设置每行高度为视口的50%，确保两行高度一致且刚好填满视口。
• 给每个列添加d-flex align-items-center justify-content-center，既实现内容水平+垂直居中，又让列自动撑满所在行的高度。
• 移除了原代码中多余的闭合</div>标签。

内容的提问来源于stack exchange，提问作者zeroes_ones