CSS Grid conundrum

by phloe

HTML

<div class="grid">
  <div class="content">
    <h2>
      CSS Grid 
    </h2>
  </div>
</div>

<div class="grid">
  <div class="content content--right">
    <h2>
      CSS Grid 
    </h2>
  </div>
</div>

CSS

.grid {
  display: grid;
  background-color: lightblue;
  margin: 2rem;
}

.content {
  justify-self: start;
  max-width: 15rem;
  background-color: goldenrod;
  margin: 0 2rem;
}

.content--right {
  justify-self: end;
}