How to create grid position elements as in this css image

How to create grid position elements like in this image. I was try build grid positions with my div elements like in this photo, but i can't do it. I was try operate with vertical-align(i am did not find solution) and with position: absolute(not work good too). Could you help me guys?

Thanks!

here is a visual of my result:

and the code (as minimal as possible):

<head>
<title></title>
<style>
    div.main
    {
        clear: both;
    }

        div.main > div.column
        {
            position: relative;
            width: 100px;
            min-height: 500px;
            float: left;
            margin:5px;
        }

            div.main > div.column > .box
            {
                background-color: black;
                min-height: 150px;
                margin:2px;
            }

                div.main > div.column > .short.box
                {
                    min-height: 100px;
                }

                div.main > div.column > .long.box
                {
                    min-height: 200px;
                }
</style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="box"></div>
        <div class="long box"></div>
        <div class="box"></div>
    </div>
    <div class="column">
        <div class="long box"></div>
        <div class="long box"></div>
    </div>
    <div class="column">
        <div class="short box"></div>
        <div class="box"></div>
        <div class="short box"></div>
        <div class="box"></div>
    </div>
</div>

Related Articles