垂直网格布局内的多个div框垂直

Question

我创建了一个div css网格布局，看起来不错，但是现在我遇到了第一个麻烦的定位框，该布局是仅适用于桌面的3栏。代码如下：

    .container {
display:grid;grid-template-areas:"header header header""nav main aside""footer footer footer";
    height:100%;width:100%;grid-template-columns:250px 1fr 220px;
grid-template-rows:133px 1fr 50px;grid-gap:0;}

    header{grid-area:header;display:flex;background-color:rgba(0,0,0,0.3);border-bottom:solid 1px #282828;margin:0px 0px 0px 0px;}

    nav{grid-area:nav;display:flex;margin:18px 18px 18px 18px;}

    main{grid-area:main;display:flex;background-color:rgba(0,0,0,0.6);border:solid 1px #282828;margin:18px 0px 18px 0px;}

    aside {grid-area:aside;display:flex;margin:18px 18px 18px 18px;}

    footer {grid-area:footer;display:flex;background-color:rgba(0,0,0,0.6);border-top:solid 1px #282828;margin:0px 0px 0px 0px;}

问题是：在旁边，我想垂直放置4个ADS盒，我尝试使用普通的div，但它不会垂直分开div，它们只是水平放置在一起。我试图像这样在ASIDE内部创建表：

<div class="functions">
<div class="prepare"><div class="titles">ENERGI</div></div>
<div class="prepare"><div class="boxes">2222</div></div>
</div>

<div class="functions">
<div class="prepare"><div class="titles">ENERGI</div></div>
<div class="prepare"><div class="boxes">2222</div></div>
</div>

<div class="functions">
<div class="prepare"><div class="titles">ENERGI</div></div>
<div class="prepare"><div class="boxes">2222</div></div>
</div>

<div class="functions">
<div class="prepare"><div class="titles">ENERGI</div></div>
<div class="prepare"><div class="boxes">2222</div></div>
</div>

为此，请使用以下CSS：

.functions {
display:table;border-collapse:collapse;border-spacing:0;margin-bottom:50;padding:0;border:0;width:100%;height:auto;}

.prepare {display:table-row;margin:0;padding:0;border:0;}

.titles {display:table-cell;padding:3px 6px 3px 6px;color: #999999;background-color:rgba(0,0,0,0.6);border:solid 1px #282828;font-size:12px;font-weight:600;margin:18px 18px 18px 18px;}

.boxes {display:table-cell;padding:6px 6px 6px 6px;color: #999999;background-color:rgba(0,0,0,0.3);border:solid 1px #282828;font-size:12px;font-weight:600;margin:18px 18px 18px 18px;}

只有1个框看起来不错，但是当我尝试4个框时，它们就像这张图片一样聚在一起；

如您所见，这些框在水平方向上彼此靠近，但是我需要这样将它们垂直分开：

有什么主意吗？ 我需要对表div进行处理吗，还是可以仅使用单个div进行修复？尝试了很多事情，但似乎是一种恶魔般的痛苦

Answer 1

我是否了解这4个div位于“ aside”元素内？只需将其添加到CSS中以供备用：

flex-direction: column

然后您可以添加排水沟

margin-bottom: 10px

进入“功能”课程