Codepen: https://codepen.io/anon/pen/XvWjGy
I make up css grids with sass.There is a layout of the card and styles for it, the card should be something like this:

I have a problem with putting an image into a grid cell
<div className="wsCard-big">
            <div className="wsCard-img">
              <img src="assets/card-2.png" alt=""/>
            </div>
            <div className="wsCard-desc">
              <h2 className="wsCard-desc__h">
                  Grand Motel gets an identity brushup
              </h2>
              <p className="wsCard-desc__s">Identity</p>
            </div>
          </div>

.wsCard-big
  display: grid
  grid-template-columns: 1fr
  grid-template-rows: 6fr 1fr
  box-shadow: 0px 2px 0px 0px #e6e9ed
  border-radius: 3px
  background-color: #fff
.wsCard-img
  display: grid
  border-radius: 3px 3px 0px 0px
  img
    border-radius: 3px 3px 0px 0px
    object-fit: cover
    width: 100%
    height: auto
    justify-self: center
    align-self: center
.wsCard-desc
  display: grid
  justify-self: center
  grid-row-gap: 5px
 &__ h
    text-align: center
    font-size: 20px
    color: #506a85
    margin: 0
    align-self: end
 &__ s
    text-align: center
    font-size: 14px
    color: #73879c
    margin: 0
    align-self: start

It turns out this:

1 Answers 1

1) >I am making up for css grids
I am not an expert, but as far as I know,"layout on the css grid" does not imply the use of a Grid instead of any block elements.It was not developed for this.

2) >I have a problem with placing an image in a grid cell
You have a width=100% for the image, and the height is"auto".Therefore, the height of the image is determined proportionally to the width. If you need the picture to fill the entire block space, you need to set the height of the picture=100%.And so that the proportions are not distorted, additionally set"object-fit: cover"
True, the picture when filling free space may go beyond a bit.

So it happened.
Is this what you need?
https://codepen.io/hisbvdis/pen/aebpzm? editors=1100