Fitting images in a css grid box

Hi
I am doing a club website (responsive), but I am struggling into insert images inside my grids(div´s):
https://codepen.io/fretagi/pen/jOMmLLa


I am trying to put images from unsplash.it into boxes 2, 3 and 4. but they are small …
Any hints how to resolv this?

You can put the images inside the grid, and scale them to make sure they only take up the dimensions of the grid. For example, if the grid is 45em(width) by 55em(height), you make sure your image:

<div class="container 2">
<img src="theImageSource.jpg" width="44em" height="54em"/>
</div>

If you’re trying to put them in using css backgrounds on the div, you’ll want to use background and background-size: cover like so for each image div:

#feat-pic1 {
  background: url('image/url.jpg') center center;
  background-size: cover;
}

This will make the image fill the div (technically as a background), cover forces it to cover the whole div, and it will be centered vertically and horizontally.

If you wanted to use them as <img>, you need to nest the img tags within the containing divs, give those divs a class of class='img-container', then in the css, get rid of the padding-left: var(--main-padding); from each image container div, .img-container needs overflow: hidden to hide any excess spillover from its img, and .img-container img needs width: 100%; display: block; to set the width as wide as the img-container, and block gets rid of line-height spacing issues.

Example HTML:
<div id="feat-pic1" class='img-container'><img src='https://images.unsplash.com/photo-1608228069492-3babaaba6f4c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80'></div>

Example CSS:

#feat-pic1 {
  border-radius: var(--main-radius);
  /*padding-left: var(--main-padding);*/
  border: var(--main-border);
  grid-area: feat-pic1;
}
.img-container { overflow: hidden; }
.img-container img {
  width: 100%; 
  display: block;
}

For that I would need to convert the width of the grid-template-columns and the height in grid-template-rows which I am not quite sure how to go about it.

your first option, works perfectley but when I try responiveness, although the aspec ratio remains the same, the image does change dimensions as I try responsiveness. I´ve seen images in a responsive and grid that do not change dimensions… Do I need to reset my breakpoints?

I’m not sure break points will help you here. If you want the height and width to maintain the proper aspect ratio, you’ll need to use the one with html container divs and img tags I think. At least, I’m not sure how to shrink the divs height with grid.

Breakpoints will need adjustment with the container divs and img method, but it’ll be easier to do.