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í
What I would do is use grid-areas. I find it easier and more adaptable than Bootstrap. A grid is considered to be one step further than flex. This is very powerful and allows you to do responsive layouts and everything. Here, in this case, we are going to use a CSS property called
grid-areas
I share my code. HTMLIn CSS we have this: