How to align items to the top when using css inline-blocks?

Question

I want to align items to the top, even above what vertical-align:top gives you. Here's an example

http://jsfiddle.net/fqw1dsj6/

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
    <div class="small"></div>
    <div class="small"></div>
</div>

css

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;  
    vertical-align:top;  
}

It ends up looking like

however I am looking for the cleanest technique for pushing blocks up to make it look more like

Is there some new modern technique/api to do this?

Thanks

Answer 1

Is there some new modern technique/api to do this?

Yes there is.

You'll need to use CSS Grid.

Then, the property you're looking for is: grid-auto-flow: dense;

---

More Information:

• https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

---

Added:

I interpreted your example as a 2x5 grid (2 columns, 5 rows) and the approach I have proposed above is based on that.