I have a code where I inserted a component (product), and I want it to take up the full width of the container. If there is only one component, it should use the full width, and if there are 2 or more, they should evenly distribute across the whole width.
<div className="container mb-5">
<img src="picture1.jpeg" alt="amazon_image" className="home__img" />
<div className="row">
<div className="col-10 mx-auto">
<div className="row gy-2">
<Product/>
</div>
</div>
</div>
<div className="row">
<div className="col-10 mx-auto">
<div className="row gy-2">
<Product/>
<Product/>
<Product/>
</div>
</div>
</div>
</div>
This is the CSS code corresponding to the HTML provided.
.home__img{
max-width: 100%;
height: auto;
z-index: -1;
margin-bottom: -180px;
mask-image:linear-gradient(to bottom , rgb(0,0,0,1) , rgb(0,0,0,0));
}