【SCSS/CSS🔰】flexのjustify-content: space-between;と同じことをgridでやりたい！

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

flexのjustify-content: space-between;とは

左右端に要素を配置。
あとは均等に要素を配置する。

｜□　　　　　□｜

こんな感じ。

gridでも同様の事をする場合

右側のコンテンツに対し、 justify-self: end;を設定する。

<div class="parent">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

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

.right {
  justify-self: end;
}

左側のコンテンツはデフォルトで左寄せになっているため設定不要。