JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Das Beispiel funktioniert im Chrome, wenn die experimentellen Webplattformfunktionen aktiviert sind, im Firefox ab 40 nach Aktivierung des Flags (layout.css.grid.enabled) und auĂźerdem im IE10+</h2>
<div class="raster">
<div class="eins">1</div>
<div class="zwei">2</div>
<div class="drei">3</div>
<div class="vier">4</div>
</div>

CSS

body {
  font: 320% sans-serif;
}
h2 {   
  font-size: 20%;
}
div div {
  background-color: #A0FFC7;
  border: 1px #4F4F4F solid;
  border-radius: 20px;
  padding: 10px;
  text-align: center;
  
}
.raster {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100px;
  grid-template-columns: 100px;
  -ms-grid-rows: 100px;
  grid-template-rows: 100px;
}

.eins {
  -ms-grid-column: 1;
  grid-column: 1 /4;
  grid-column: 1 / span 4;
  -ms-grid-row: 1;
  -ms-grid-column-span: 4;
  grid-row: 1;
}
.zwei {
 -ms-grid-column: 1;
 grid-column: 1;
 -ms-grid-row: 1;
 -ms-grid-row-span: 1;
  grid-row: 2 /4;

}
.drei {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 2;
  grid-row: 2;
}
.vier {
    -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 4;
  grid-row: 4;
   -ms-grid-column-span: 4;
}