html – Is it attainable to break down a css grid column if the contents are empty

I’ve a part with an OK/Cancel button, the place I would like the buttons each the identical width whatever the textual content measurement (eg completely different cultures)

So, a simplified mockup which is near what I’ve is…

<div id="container">
  <div class="button">OK</div>
  <div class="button">Cancel</div>
</div>

#container {
  background: inexperienced;  
  proper: 0;
  place: absolute;
  show: grid;
  grid-template-columns: 1fr minmax(0, 1fr)
}

.button {
  text-align: heart;
  padding: 5px;
  min-width: 40px;
  width: auto;
  margin: 5px;
  background: yellow;
}

Can even see at this codepen

So, we are able to see if the OK textual content is lengthy, then the Cancel button additionally grows to the identical width

Nonetheless, the part I’m utilizing (third social gathering) additionally used the OK for simply shut

eg

<div id="container">
  <div class="button">Shut</div>  
</div>

and now I’ve an undesirable hole on the proper hand facet

I can goal the part courses, however not the construction.

So, is there any approach through simply CSS I can have this grid to behave like a grid-template-columns: 1fr 0 if the second div just isn’t there?