Javascript CSS网格嵌套在一列中的两行

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

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

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

您可以看到，我已经设置了一些网格系统，但并不像我希望的那样理想。在红色和橙色框之间没有可以设置的边距，即使我可以将边距添加到turqoise和blue框中

以下是我的代码：

HTML:

这里是电箱
这里是蓝色的盒子
这里是红色的盒子
这里是橙色的盒子

CSS:

.d-table{
显示：表格；
}
t-row酒店{
显示：表格行；
}
.t细胞{
显示：表格单元格；
左边距：未设置；
保证金权利：未结算；
/*边框：1个实心番茄*/
}
.三分之一{
宽度：30%；
}
.三分之二{
宽度：200px；
}
.蓝盒子{
背景色：#9dd8dd；
利润率：25px；
边界半径：25px；
边框：实心#7dacb0；
边框宽度：3倍；
盒影：2px4px8px2pxRGBA（0,0,0,0.4）；
过渡：0.3s；
文本对齐：居中；
}
.蓝盒子：悬停{
盒影：2px 8px 16px 2px rgba（0,0,0,0.8）；
}

---

关于如何整齐地复制第二个图像结果，您有什么想法吗？

您可以使用

flexbox

。看看这个简化的例子：

.content{
背景：橙色；
保证金：1rem；
填充：1rem；
弹性：1；
颜色：白色；
显示器：flex；
}
.content>span{
保证金：自动；
}
.行{
显示器：flex；
弯曲方向：行；
背景颜色：蓝色；
弹性：1
}
上校{
显示器：flex；
弯曲方向：立柱；
弹性：1；
背景色：红色；
}

这是居中的
这是居中的
这是居中的
这不是
这不是
这不是
这不是
这不是
这是居中的

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

为什么不使用CSS网格，正如您自己的标题所暗示的那样？这是最好的！还有一个问题，我希望垂直和水平对齐文本。我尝试添加

css文本对齐：居中；对齐项目：居中；证明内容：中心但没有很好地工作。有什么想法吗？你想把文本放在div的中心吗？有。我把文本放在第二张和第三张图片所示的框中，但它是对齐左上角的。当我使用
文本对齐：居中，它将文本水平放置在中心，但我也希望垂直放置。垂直居中是主要问题。再次感谢！我做了编辑。我将
display:flex
添加到
.content
，并添加了一条新规则
.content>span{margin:auto；}
。这条规则奏效了，这个问题就解决了。谢谢你的帮助！你应该至少举一个例子来说明你的解释是的，我无法理解你的想法。我在去大学的路上回答了这个问题，我没有时间做一个例子。