como ordenar cuadros sin que se pierda la posicion con css?

[danistrein]

estoy generando desde php los datos que van a ir varios cuadros, este es mi codigo como lo genero:

Código php+css+html:

<style>
.app_lista_contenido{
    width:100%;
}
.app_lista_item{
    float:left;
    width:45%; margin:3% 0 0 3%;
}
.app_lista_item_imagen{
    width:100%; height:150px;
}
.app_lista_item_nombre{
    padding:10px 5px 5px 5px; margin-top:-5px; border:1px solid #ccc;
    font-size:13px;
}
</style>
<div class="app_lista_contenido ma oh">
    <?
        $productos=array(
            array("nombre"=>"food", "imagen"=>"http://lorempixel.com/200/200/food", "precio"=>"50"),
            array("nombre"=>"sports", "imagen"=>"http://lorempixel.com/200/200/sports", "precio"=>"332"),
            array("nombre"=>"este es 333 nombre largo", "imagen"=>"http://lorempixel.com/200/200/city", "precio"=>"636"),
            array("nombre"=>"city extra super super largo", "imagen"=>"http://lorempixel.com/200/200/abstract", "precio"=>"485"),
            array("nombre"=>"business", "imagen"=>"http://lorempixel.com/200/200/business", "precio"=>"257"),
            array("nombre"=>"nightlife nombre super super largo", "imagen"=>"http://lorempixel.com/200/200/nightlife", "precio"=>"156"),
            array("nombre"=>"fashion", "imagen"=>"http://lorempixel.com/200/200/fashion", "precio"=>"700"),
            
            array("nombre"=>"food", "imagen"=>"http://lorempixel.com/200/200/food", "precio"=>"222"),
            array("nombre"=>"sports", "imagen"=>"http://lorempixel.com/200/200/sports", "precio"=>"635"),
            array("nombre"=>"este es 333", "imagen"=>"http://lorempixel.com/200/200/city", "precio"=>"834"),
            array("nombre"=>"city nombre extra super super largo", "imagen"=>"http://lorempixel.com/200/200/abstract", "precio"=>"944"),
            array("nombre"=>"business", "imagen"=>"http://lorempixel.com/200/200/business", "precio"=>"2347"),
            array("nombre"=>"nightlife", "imagen"=>"http://lorempixel.com/200/200/nightlife", "precio"=>"1689"),
            array("nombre"=>"fashion", "imagen"=>"http://lorempixel.com/200/200/fashion", "precio"=>"278"),
        );
        foreach($productos as $producto => $contenido){
    ?>
    <div class="app_lista_item oh rod">
        <img src="<?=$contenido['imagen']?>" class="app_lista_item_imagen db rod" />
        <div class="app_lista_item_nombre"><?=$contenido['nombre']?></div>
    </div>
    <?
        }
    ?>
</div>
 

esto es un ejemplo sin php: https://jsfiddle.net/traslapc/e20cw6sh/

como veran se desposicionan los cuadros, no estan alineados:


lo que me gustaria lograr es esto


primero que esten alineados como en la imagen de la izquierda, y segundo, que cada dos cuadros me genere un cuadro que ocupe el tamaño de 4 cuadros, como puedo realizar lo mencionado?