I'm currently working on rendering divs with a background image CSS property. The images have fixed sizes, and I want to display them in a grid layout. However, the divs with background images stretch when there is extra space available, which is not the desired outcome. Since I am not an expert in CSS, any assistance would be greatly appreciated. Below is the HTML and CSS code:
.inner-tile {
display: grid;
grid-gap: 1em;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-template-rows: 1fr;
width: 98%;
height: 100%;
padding-top: 1%;
padding-right: 1%;
padding-left: 1%;
/*border: 1px solid red;*/
font-size: 18px;
}
.event {
display: grid;
grid-gap: 5px;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
justify-items: center;
border: 1px solid grey;
border-radius: 4px;
min-width: 240px;
min-height: 200px;
height: 100%;
width: 100%;
}
.event-image {
background: url('https://placekitten.com/200/200');
background-repeat: vertical;
background-size: 100%;
width: 100%;
height: 100%;
}<div class = "inner-tile">
<div class = "event">
<div class="event-image"></div>
<h3 class = "learn-more">Corporate Event</h3>
</div>
<div class = "event">
<div class="event-image"></div>
<h3 class = "learn-more">Weddings</h3>
</div>
<div class = "event">
<div class="event-image"></div>
<h3 class = "learn-more">Party</h3>
</div>
</div>