CSS Grid 两行嵌套在一个列中

Question

我正在寻找一种方法，允许单列中有两行，而其右侧的其他两列与这两行的高度相等/灵活。查看所有三列时，宽度应为 100%（因此每列约为 33%）。这是我希望它的外观的示例：

https://i.imgur.com/lLPzXhS.png

我将用可点击的框填充这些框，如下所示：

https://i.imgur.com/uyyDbL7.png

我尝试过使用 display: row, display: cell，但我无法为其添加任何边距，所以这是我得到的产品：

https://i.imgur.com/Ok6EgT0.png

您可以看到我已经设置了一些网格系统，但并没有我想要的那么理想。红色和橙色框之间没有可以设置的边距，即使我可以为绿松石色和蓝色框添加边距。

这是我的代码：

HTML：

<div class='d-table'>
    <div class='t-row'>
        <div class='t-cell one-third'>
            <div class='turqoisebox'>
                Turqoise box here
            </div>
            <div class='bluebox'>
                Blue box here
            </div>
        </div>
        <div class='t-cell one-third redbox'>
            Red box here
        </div>
        <div class='t-cell one-third orangebox'>
            Orange box here
        </div>
    </div>
</div>

CSS：

.d-table {
    display: table;
}

.t-row {
    display: table-row;
}

.t-cell {
    display: table-cell;
    margin-left: unset;
    margin-right: unset;
    /*border: 1px solid tomato;*/
}

.one-third {
    width: 30%;
}

.two-thirds {
    width: 200px;
}

.bluebox {
    background-color: #9dd8dd;
    margin: 25px;
    border-radius: 25px;
    border: solid #7dacb0;
    border-width: 3px;
    box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
    transition: 0.3s;
    text-align: center;
}

    .bluebox:hover {
        box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
    }

关于如何巧妙地复制第二张图像结果有什么想法吗？

Answer 1

您可以使用flexbox。看看这个简化的例子：

.content {
    background: orange;
    margin: 1rem;
    padding: 1rem;
    flex: 1;
    color: white;
    display: flex;
}

.content > span {
    margin: auto;
}

.row {
    display: flex;
    flex-direction: row;
    background-color: blue;
    flex: 1
}

.col {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: red;
}

<div class="row">
    <div class="col">
        <div class="row">
            <div class="content">
                <span>This is centered</span>
            </div>
        </div>
        <div class="row">
            <div class="content">
                <span>This is centered</span>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="content">
            <span>This is centered</span>
        </div>
        <div class="content">
            This is not
        </div>
        <div class="content">
            This is not
        </div>
    </div>

    <div class="col">
        <div class="content">
            This is not
        </div>
        <div class="content">
            This is not
        </div>
        <div class="content">
            This is not
        </div>
        <div class="content">
            <span>This is centered</span>
        </div>
    </div>
</div>

您还可以使用基于 flexbox 的最小网格库，例如 Flexbox Grid。

Answer 2

边距用于设置元素的起始位置，因此请在这两个元素之间使用填充来获得所需的空间。