<div class="red">Normally aligned</div>
<div class="blue-wrapper">
  <div class="green">Aligned left with grid</div>
  <div class="blue">Aligned right with grid</div>
</div>
.red, .blue, .green {
  height: 200px;
  width: 200px;
  color: #fff;
  text-align: center;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
  grid-area: 'blue';
}

.green {
  background-color: green;
}

.blue-wrapper {
  display: grid;
  grid-template-areas: 'green blue';
    grid-auto-columns: calc(100% - 200px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.