JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid" style="-ms-grid-rows:0.2fr 0.4fr; grid-template-rows: 0.2fr 0.4fr;float:left;border:5px solid red;width:200px;">
  <div style="-ms-grid-row: 1;grid-row-start:1;background:blue;min-height:0px;">
    <div class="content"></div>
  </div>
  <div style="-ms-grid-row: 2;grid-row-start:2;background:yellow;min-height:0px;">
    <div class="content"></div>
  </div>
</div>

<div class="grid" style="-ms-grid-rows:0.5fr 1fr; grid-template-rows: 0.5fr 1fr;float:left;border:5px solid red;width:200px;">
  <div style="-ms-grid-row: 1;grid-row-start:1;background:blue;min-height:0px;">
    <div class="content"></div>
  </div>
  <div class="griditem" style="-ms-grid-row: 2;grid-row-start:2;background:yellow;min-height:0px;">
    <div class="content"></div>
  </div>
</div>

<div class="grid" style="-ms-grid-rows:1fr 1fr; grid-template-rows: 1fr 1fr;float:left;border:5px solid red;width:200px;">
  <div style="-ms-grid-row: 1;grid-row-start:1;background:blue;min-height:0px;">
    <div class="content"></div>
  </div>
  <div style="-ms-grid-row: 2;grid-row-start:2;background:yellow;min-height:0px;">
    <div class="content"></div>
  </div>
</div>

CSS

.grid {
  display: -ms-grid;
  display: grid;
  background: orange;
}

.content {
  width: 48px;
  height: 48px;
  background: gray;
  border:1px solid black;
}