有没有办法将嵌套子元素与css网格对齐？

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  .grid-item {
    border: 1px solid black;
    padding: 10px;
  }

  .nested-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  .nested-grid-item {
    border: 1px solid black;
    padding: 10px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">
    <h2>Parent Grid Item</h2>
    <div class="nested-grid-container">
      <div class="nested-grid-item">Nested Grid Item 1</div>
      <div class="nested-grid-item">Nested Grid Item 2</div>
    </div>
  </div>
  <div class="grid-item">Grid Item 2</div>
</div>