Is there a way to get make a css grid element stretch to a certain size but also behave like it has justify-self set to end?

Question

I have two elements inside a grid container. Each element has a max-width of let's say 200px. I want the first element to stretch to fill the cell up to 200px, but also stick to the right border of its cell. This is what I have so far:

HTML

<div class="grid-container">
  <div class="element__1"></div>
  <div class="element__2"></div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5vw;
  justify-content: center;
}

.element__1 {
  background-color: green;
  max-width: 200px;
  min-width: 40px;
  min-height: 50px;
  /* justify-self: end; */
}

.element__2 {
  background-color: red;
  max-width: 200px;
  min-width: 40px;
  min-height: 50px;
}

This satisfies the condition of stretching to fill the cell up to 200px, however the gap appears much larger since the element by default sticks to the left cell border.

Answer 1

Consider applying width: 100% to .element__1 so that it stretches in width as much as it can, until it hits the max-width constraint. This should allow you to use justify-self: end:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5vw;
  justify-content: center;
}

.element__1 {
  background-color: green;
  max-width: 200px;
  width: 100%;
  min-width: 40px;
  min-height: 50px;
  justify-self: end;
}

.element__2 {
  background-color: red;
  max-width: 200px;
  min-width: 40px;
  min-height: 50px;
}

<div class="grid-container">
  <div class="element__1"></div>
  <div class="element__2"></div>
</div>