Css 砌体将根据具体布局进行设计

我怀疑我只是不知道如何思考这个问题来寻找答案

我用砖石砌成了17个街区。区块宽度为50%或25%。我的问题是，我想实现4 1布局，所以它看起来像这样：

11|
|  1
1 1 |

相反，砌体将自动在一行中运行25%宽的div，如下所示：

1
1

任何关于如何实现我想要的东西的建议都将不胜感激

试试这个HTML

<div class="columns">
  <div class="column">
    1
  </div>
    <div class="column">
    1
  </div>
</div>

<div class="columns">
   <div class="column" style="margin-left: auto;display: block">
    1
  </div>
</div>

<div class="columns">
  <div class="column">
    1
  </div>
    <div class="column">
    1
  </div>
</div>

---

谢谢您的回复。但是，我正在使用massy.js，我正在寻找使用该库的解决方案。

.columns{
  width: 100%;
}
.column{
  height: 100px;
  display: inline-block;
  width: 25%;
  background:red;
  margin-top: 1em;
}