[SOLUCIONADO] 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?

[ArturoGallegos]

1.- deja de usar float para alinear contenidos
2.- utiliza flex, este tiene opciones para posicionar elementos asi como para permitir o impedir el salto de linea

También considera que al ser por CSS tienes que ser muy preciso con el contenido o estar ajustando constantemente.

Mi recomendacion usa algo de javascript
https://masonry.desandro.com/

[danistrein]

gracias por la respuesta arturo, estas en todos lados jaja, el punto es no usar php ni js, solo css, logre lo que queria usando lo siguiente en el contenedor:

Código CSS:

display: grid;
grid-template-columns: repeat(2, 1fr);
 

y para agregar el cuadro de una sola imagen use:

Código CSS:

grid-column:1/3;
grid-row:2/3;
 

dejo aquí un link de prueba: https://jsfiddle.net/traslapc/1zu70r6o/
y los paso para resolver el problema: https://es.stackoverflow.com/questio...sicion-con-css