Using CSS grid to align content in a non responsive div

Question

My job is to supervise a junior developer, but I am mainly a javascript developer and my CSS skills are a bit basic. However, I spotted some things in his CSS code that seem unorthodox to me. He committed some CSS code similar to the one I post here:

<div class="label-item">
    <div class="label-image-container">
        <img src="www.aphoto.com"/>
    </div>
    <div class="label-info">

        <span class="label-name">John</span>
        <span class="description">John is an elephant</span>
        <div>
            <span class="size">1000 kg</span>
            <span class="age">10 years old</span>
        </div>
    </div>
    <div class="more-button">
        <span> ... </span>
    </div>
</div>

And the sass:

.label-item {
  margin: .8rem;
  display: grid;
  grid-template-columns: 4.4rem 1fr 1.8rem;
  grid-gap: 0 1rem;
  background-color: grey;
  align-items: center;
  width: 300px;
  height: 80px;
  position: relative;

  .label-image-container {
    width: 50px;
    height: 50px;
    display: inline-block;

    img {
      max-width: 50px;
      max-height: 50px;
      float: left;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: auto;
    }
  }

  .label-info {
    display: grid;
    position: relative;
    grid-gap: .3rem;

    .label-name {
      font-size: 1.2rem;
      line-height: 1.5rem;
      height: 1.4rem;
    }
    .description, .size, .age {
      font-size: 1rem;
      display: inline-block;
      float: left;
    }

    .age {
      margin-left: .8rem;
      float: right;
    }
}
  .more-button {
    height: 100%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-row-end: span 1;
  }
}

this is a codepen of this code: https://codepen.io/anon/pen/QXadMP

My questions are:

a. Is grid positioning appropriate to alight and place elements inside a div that is not the main website container. I know that it works, but is this best practice?

b. Is nested grids considered to be best practice (.label-info inside .label item)?

c. Is using 'display: flex' appropriate to use just to align the content of a div in center?

Answer 1

I think the CSS looks fine. To your questions

a.) It doesn't matter which container has the grid property. It's CSS. It's not semantic.

b.) I am not sure if it is considered a best practice, but a lot of people seem to use it this way. Just google CSS nested grid and you will get quite some articles and videos on that topic. For example this and this.

c.) Counter question: Why not? CSS doesn't add any semantic meaning to HTML. It's just for styling. So, IMHO as long as it works and is scalable/maintainable it's fine.