[SOLUCIONADO] Problema Columnas Bootstrap

[agusax]

Muy buenas chic@s,
Hoy me ha aparecido un error que no me esperaba, al que he estado buscando por el foro de como solucionarlo y me he encontrado con otro chico que le pasa lo mismo, pero no fue resuelto (no escribo ahí por no revivir post antiguos)
El caso es que al mostrar imágenes, se me generan unos espacios en blanco.
Algo parecido a esto, cada cuadrado negro sería la imagen que cargo y el espacio, se genera de vez en cuando:


El trozo del código en el que genero las imágenes es el siguiente:

Código HTML:

<!-- Galeria -->
...
<div class="col-md-6">
    <div class="row">
        <div id="foto" class="col-md-12"></div>
    </div>
</div>
<div class="col-md-6">
        <!-- dato a completar -->
</div>
...
 

Y ese div con ID=fotoes llamado con un script y se rellena con lo siguiente:

Código PHP:

<?php
    $foto= $_POST['carpeta'];
 
    function listar_gemas($foto){
        //URL de la carpeta
        $carpeta= "images/edificios/".$foto;
        $cont= 1;
        if(is_dir($carpeta)){
            if($dir = opendir($carpeta)){
                while(($archivo = readdir($dir)) !== false){
                    //Se obvia los directorios y htaccess
                    if($archivo != "." && $archivo != ".." && $archivo != ".htaccess"){
                        $nombre= basename($archivo, ".jpg");
                        //DIV para cada imagen
                        echo '<div class="col-md-3 col-xs-6">';
                            echo '<label>';
                                //Primera imagen seleccionada por defecto + script lanzado
                                if($cont == 1){
                                    echo '<input type="radio" name="edificio_img" value="'.$foto.'_'.$nombre.'" checked="checked">';
                                    echo '<script type="text/javascript"> currentDiv('.$cont.');</script>';
                                }else{
                                    echo '<input type="radio" name="edificio_img" value="'.$carpeta.'_'.$nombre.'">';
                                }
                                echo '<img class="demo w3-opacity w3-hover-opacity-off" src="'.$carpeta."/".$archivo.'" alt="imagen_'.$nombre.'" onclick="currentDiv('.$cont.')" >';
                            echo '</label>';
                        echo '</div>';
                        $cont++;
                    }
                }
                closedir($dir);
            }
        }
    }
    
    //Llamo a la función para que se ejecute
    listar_fotos($foto);
?>
 

Me trae de cabeza este error, ya que he revisado todo el código por si faltaba algún
cierre o algo, pero no lo consigo encontrar.

Muchas gracias de antemano :D

Edito: estoy intentando agruparlas de 4 en 4, pero he reutilizado la imagen del compañero que lo agrupaba de 2 en 2 y no fue resuelto.

[alvaro_trewhela]

Y el css donde está?

[agusax]

No crei tan importante, ya que no formateo tanto las imagenes.

Código CSS:

img.demo{width: 100%;}
input[type="radio"]{ display:none; }
 

Edito:
He hecho una prueba añadiendo imagenes y sombreando los divs, por si sirve de ayuda.


Edito de nuevo, las imágenes tenían diferentes alturas, así que han sido editadas y puesto un height=100%, marco como solucionado el post