My CSS code defines how images appear on my website. Below is my HTML code which displays a list of cars but also includes a component called Car with additional code.
<section className="Carslist">
<div className="Carslist-center">
{cars.map(item => {
return <Car key={item.id} car={item} />;
})}
</div>
</section>
.Carslist {
padding: 5rem 0;
}
.Carslist-center {
width: 100vw;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-row-gap: 2rem;
grid-column-gap: 30px;
}
@media screen and (min-width: 776px) {
.Carslist-center {
width: 90vw;
}
}
@media screen and (min-width: 992px) {
.Carslist-center {
width: 95vw;
max-width: 1170px;
}
}
https://i.sstatic.net/99c9G.jpg
I am trying to ensure that each picture fits perfectly within the grid layout.