Prevent CSS Grid Item from expanding to full width based on content/auto-sizing

Question

I am trying to center content using grid and inline-flex. I'm able to do it if I use flex-box and flex-direction: column;, but I'm really hoping to find a minimal code version using grid instead.

Here is the layout I'm looking for, which relies on flex-direction: column; on the .grid. Please run the code snippet below to see the layout.

.parent-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.grid {
  grid-column-start: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-bottom: 25px;
}

.btn {
  border: 1px solid black;
  display: inline-flex;
  padding-left: 45px;
  padding-right: 45px;
  height: 38px;
  align-items: center;
}

.btn-text {
  margin-right: 20px;
}

.img {
  height: 30px;
  width: 30px;
  background-color: red;
}

<div class="parent-grid">
  <div class="grid">
    <h1>
      My Long Title Goes Here
    </h1>

    <a class="btn">
      <span class="btn-text">
        My btn text
      </span>
      <div class="img"></div>
    </a>
  </div>
</div>

Here's my attempt using grid. I'm not sure why the button expands to full width. It's using inline-flex, so shouldn't that mean its width is auto, rather than 100%?

.parent-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.grid {
  grid-column-start: 2;
  display: grid;
  align-items: center;
}

h1 {
  margin-bottom: 25px;
}

.btn {
  border: 1px solid black;
  display: inline-flex;
  padding-left: 45px;
  padding-right: 45px;
  height: 38px;
  align-items: center;
}

.btn-text {
  margin-right: 20px;
}

.img {
  height: 30px;
  width: 30px;
  background-color: red;
}

<div class="parent-grid">
  <div class="grid">
    <h1>
      My Long Title Goes Here
    </h1>

    <a class="btn">
      <span class="btn-text">
        My btn text
      </span>
      <div class="img"></div>
    </a>
  </div>
</div>