Zurb foundation 使基础柱跨多个；“行”；列数

这可能是一个难以置信的愚蠢问题，但我不知道如何使3组柱与基金会的网格对齐

这是我的建议

HTML

我希望黑色列与列的第一个“行”对齐，而不使

.row

容器的位置相对，而使

中3列的位置绝对

此外，为什么这项工作不像我想象的那样有效？这样的情况难道不是网格系统的全部意义吗

谢谢
 你很接近。正确的解决方案应该是这样的（）：

小提琴关闭的原因是每行的长度必须为12列。如果一行包含或超过12列，则溢出的元素将换行到下一行，即使未声明行也是如此

<div class="row">
  <div class="medium-9 columns">
  ...
  </div>
  <div class="medium-9 columns">
  ...
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>


...
...

行中的第二个div使这些列相加为18，因此它将其向下推到下一个级别。这就是为什么最后一个div（共3列）会附加到第二个div（共9列）的末尾

要获得所需的布局，需要嵌套行，并确保每行最多可添加12列

<div class="row">
  <div class="medium-9 columns">
    <div class="row">
      <div class="medium-4 columns" style="height: 250px; background: green;"></div>
      <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
      <div class="medium-4 columns" style="height: 250px; background: red;"></div>
    </div>
    <div class="row">  
      <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
      <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
      <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
    </div>
</div>
<div class="medium-3 columns" style="height: 500px; background: black;"></div>



太棒了，谢谢！您是否知道将列放入行中的具体操作是什么，从而使黑色列能够很好地与它们相邻？划分元素似乎并不表示有任何不同/首先会干扰柱的存在？这是关于基础网格的构建方式（查看高级段落）。
<div class="row">
  <div class="medium-9 columns">
  ...
  </div>
  <div class="medium-9 columns">
  ...
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>

<div class="row">
  <div class="medium-9 columns">
    <div class="row">
      <div class="medium-4 columns" style="height: 250px; background: green;"></div>
      <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
      <div class="medium-4 columns" style="height: 250px; background: red;"></div>
    </div>
    <div class="row">  
      <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
      <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
      <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
    </div>
</div>
<div class="medium-3 columns" style="height: 500px; background: black;"></div>