Float layout with reordering in modern CSS - css

Question

I used to be good at CSS at one point, but the ship has sailed on while I was away.
I need some guidance on how to solve the following case:
I have X number of divs where X may change over time
The divs "float left" inside a container div, wrapping into rows
All the divs have their own rigid width and height
The divs have an order that can change and that is important
It is desirable that the rows formed by the float layout dont create uneccessary "gaps" (see the marked areas in example below)
So my html is like this:
<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>
And my naïve pseudo-CSS is like this:
.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;
}
So my question is, are there any modern CSS primitives that would solve this case? Especially, can the order be handeled in pure CSS?

Answer 1

You can achieve this with Flexbox . Flexbox is a pure CSS solution for that kind of problems.
All modern browsers supports it, so you can get rid of the float in your CSS files.
For better understanding, you can read about it here.
Hope it helps.