0

Estaba trabajando con react bootstrap5 y estaba viendo una galeria dise;ada por otra persona y me surgio la duda si es posible lograr una galeria parecida con el sistema de grid de bootstrap , se como funciona el sistema de de fila y columna de bootstrap pero no tengo tanta experiencia como para saber si es posible acoplar las imagenes como se ven en el ejemplo y queria consultarle a alguien que tenga mas experiencia

introducir la descripción de la imagen aquí

Desde ya gracias

2

1 respuesta 1

1

Agregando un poco de codigo css logre este resultado galeria

.img-galeria{
    width: 100%;
    border-radius: 5px;
}

.galeria-1-1{
    height: 25%;
}

.galeria-1-2{
    height: 25%;
}

.galeria-2-1{
    height: 35%;
}

.galeria-2-2{
    height: 15%;
}

.galeria-3-1{
    height: 25%;
}

.galeria-3-2{
    height: 25%;
}
        <div className='container'>
            <div className='row'>
                <div className='col'>
                    <img className='img-galeria galeria-1-1' src={Imagen}></img>
                    <img className='img-galeria galeria-1-2' src={Imagen}></img>
                </div>
                <div className='col-6'>
                    <img className='img-galeria galeria-2-1' src={Imagen}></img>
                    <img className='img-galeria galeria-2-2' src={Imagen}></img>
                </div>
                <div className='col'>
                    <img className='img-galeria galeria-3-1' src={Imagen}></img>
                    <img className='img-galeria galeria-3-2' src={Imagen}></img>
                </div>
            </div>
        </div>

Podes cambiar el valor de height a tu antojo ya sea por % o px.

Las clases indican la columna y fila de la siguiente manera: galeria-(COLUMNA)-(FILA).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.