How to align last item to right in the grid layout

Question

.container{
  display:grid;
  grid-template-rows:1fr;
  grid-template-columns: repeat(3,auto);
  justify-content:left;
  border:1px solid red;
}

.child3{
  margin-left:auto;
  background:yellow;
}

<div class="container">
<div class="child1">
  child-1
</div>
<div class="child2">
  child-2
</div>
<div class="child3">
  child-3
</div>
</div>

I need to align the 3rd item(yellow bg ) to right aligned. is it possible with grid layout?

Answer 1

.container{
  display:grid;
  grid-template-rows:1fr;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "a b c d";
  justify-content:left;
  border:1px solid red;
}

.child3{
  grid-area: d;
  background:yellow;
}

<div class="container">
<div class="child1">
  child-1
</div>
<div class="child2">
  child-2
</div>
<div class="child3">
  child-3
</div>
</div>