我曾经在某个时候擅长CSS，但是当我不在的时候，船已经起航了。
我需要一些关于如何解决以下案例的指导：
1.我有X个div，其中X可能会随时间变化

1. div在容器div内“左浮”，并换行
   1.所有的div都有自己固定的宽度和高度
2. Divs有一个可以改变的顺序，这很重要
   1.浮动布局形成的行最好不要产生不必要的“间隙”（参见以下示例中的标记区域）
   所以我的html是这样的：

<div class="container">
<div id="item-1" class="item"></div>
    <div id="item-2" class="item"></div>
    <div id="item-3" class="item big"></div>
    <div id="item-4" class="item"></div>
    <div id="item-5" class="item"></div>
    <div id="item-6" class="item"></div>
    <div id="item-7" class="item big"></div>
    <div id="item-8" class="item"></div>
    <div id="item-9" class="item"></div>
    <div id="item-a" class="item"></div>
    <div id="item-b" class="item"></div>
    <div id="item-c" class="item"></div>
    <div id="item-d" class="item"></div>
</div>

我天真的伪CSS是这样的：

.container {
  display: block;
  width: 600px;
  height: 600px;
  border: 2px solid black;
}

.item {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  float: left;
}

.item.big {
  width: 150px;
  height: 110px;
  border: 2px solid red;
}

所以我的问题是，* 有没有什么现代的CSS原语可以解决这个问题？* 特别是，订单可以在纯CSS中处理吗？