enter the code here I have a query regarding boostrap and its grid system, I was programming a mosaic style gallery and I was basing it heavily on these 2 portfolios
Above all, the query comes from the second portfolio that has a quite striking gallery where some images occupy a row and a column and others occupy only one position, as far as I understand boostrap does not allow expanding a column or row and that is the query that I wanted to make a community, if an effect similar to the second gallery can be achieved with boostrap 5 and the other question is what advice can you give me to normalize the images of the carousel, I suppose that I myself have to take care of putting images of them pixels so that the carousel is not deformed like the first portfolio
A minimal example to give you an idea
https://batvizz.github.io/Minimal-Example/ilustration.html
introducir el código <div class="container ">
<div class="row m-3">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imagenes/1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="imagenes/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="imagenes/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="imagenes/imagen1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="imagenes/imagen2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="imagenes/imagen3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen1.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen2.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen3.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen4.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen5.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen6.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen7.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen9.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen8.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen10.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen5.jpg" alt="">
</div>
<div class="col-lg-3 ">
<img class="img-fluid m-2" src="imagenes/imagen4.jpg" alt="">
</div>
</div>
</div>aquí