@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');



* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;

    font-family: 'Roboto',
        sans-serif;
}


.galeria{
    display: grid;
    width: 100vw;
    height: 100vh;

    /* intenta meter tantos items como quepan con un límte inferior de 300px y una fracción como máximo */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(200px, 1fr));
    

    /* No tenemos los items del las imágenes implícitas, que se salen de las medidas de nuestro contenedor (son filas que nos faltan por gestionar), por lo que usaremos grid-auto-rows para que gestione las medidas de ellas... */
    grid-auto-rows: minmax(200px, 1fr);
    grid-auto-columns: minmax(300px, 1fr);
    


    /* podemos hacer que ocupen los huecos */
    grid-auto-flow: row;

    grid-auto-flow: row dense;
    

    grid-gap: 10px;
 
}

.galeria img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hueco{
    background-color: rgb(216, 166, 109);
    width: 100%;
    height: 100%;
}

.galeria img:nth-child(2n){
    grid-column-end: span 2;
}

.galeria img:nth-child(3n){
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.galeria img:nth-child(2n+1){
    grid-row-end: span 3;
}





/* ** Nota de object-fit: fill | contain | cover | none | scale-down */

/* * contain  */
/* El contenido reemplazado está dimensionado para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento. */
/* * cover  */
/* El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento. Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste.  */
/* * fill  */
/* Modifica el tamaño del elemento remplazado para llenar el cuadro de contenido. El objeto completo ocupará todo el espacio de la caja. Si el tamaño del elemento no concuerda con el de su caja, se estirará para llenarlo.  */
/* * none  */
/* El contenido reemplazado no se redimensiona.  */
/* * scale-down  */
/* El contenido se dimensiona como si none o contain estuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño. */