[JavaScript][HTML][CSS] ułożenie divów Opcje

[kamilo818]

Cześć,
czy jest jakiś łatwy znany sposób na ułożenie divów o tej samej szerokości ale różnej wysokości w kilku rzędach (w zależnosci o szerokości ekranu ) tak aby nie było między nimi luk?

aktualnie mam coś takiego :
https://jsfiddle.net/yvtej467/1/
A chce żeby było coś takiego:


Da się to za pomocą samego cssa zrobić?

Ewentualnie myślę ze dało by się to zrobić za pomoca js gdzie bym ustawiał position:absolute po kolei każdego diva w zależnosci o szerokości ekranu i położenia diva poprzedniego. Ale czy można łatwiej?

edit ----------------------------------
Jakoś sam poradziłem sobie.
Nie wiem jak z jakością tego, ale sprawdza się dobrze:)
Może komuś się przyda.

[PHP] pobierz, plaintext 
<div class="page" id="aktualnosci">
    <div class="wpis" data-sort="1">
        <div id="wpis_date">
            11-04-2015
        </div>
        <div id="wpis_nr">
 
        </div>
        <div id="wpis_title">
 
        </div>
        <div id="wpis_content">
 
        </div>
    </div>
    <div class="wpis" data-sort="2">
        <div id="wpis_date">
 
        </div>
        <div id="wpis_nr">
 
        </div>
        <div id="wpis_title">
 
        </div>
        <div id="wpis_content">
        </div>
    </div>
    <div class="wpis" data-sort="3">
        <div id="wpis_date">
 
        </div>
        <div id="wpis_nr">
 
        </div>
        <div id="wpis_title">
 
        </div>
        <div id="wpis_content">
 
        </div>
    </div>
    <div class="wpis" data-sort="4">
        <div id="wpis_date">
 
        </div>
        <div id="wpis_nr">
 
        </div>
        <div id="wpis_title">
 
        </div>
        <div id="wpis_content">
 
        </div>
    </div>
 
</div>
 
 
<script>
 
    function makeGrid() {
 
        if ($('div#aktualnosci').width() <= ($('.wpis').width()+10)*2 && $("#grid").length) {
            var ilosc = $(".wpis").length;
            for (i = 1; i < ilosc + 1; i++) {
                $(".wpis[data-sort='" + i + "']").appendTo("div#aktualnosci");
            }
            $('div#grid').remove();
        } else if ($('div#aktualnosci').width() > ($('.wpis').width()+10)*2 && $("#aktualnosci .wpis").length) {
            if ($("#grid").length) {
            } else {
                $('div#aktualnosci').prepend('<div id="grid"><div id="col1"></div><div id="col2"></div></div>');
                $('#grid>div').width($('.wpis').width());
                $(".wpis").each(function (e) {
                    if (e % 2 == 0)
                        $(this).appendTo("#grid div#col1");
                    else
                        $(this).appendTo("#grid div#col2");
                });
            }
        }
    }
    ;
 
    makeGrid();
 
    $(window).resize(function () {
        makeGrid();
    });
</script>
[PHP] pobierz, plaintext