Cacher is the code snippet organizer for pro developers

/* first box text rest images */
.panel {
  max-width: 800px;
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-auto-rows: minmax(200px, auto);
  grid-gap:1px;
}

<style>
  .grid-container {
    display: grid;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
    grid-template-columns: [first] 1fr [middle] 300px [last] 1fr;
    grid-template-rows: [row1] 300px [row2] 300px;
    // grid-template-rows: auto;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
  // justify-self: stretch;
  // align-self: stretch;
}



.item-1 {
  grid-column: first;
  grid-row: row1 / span 2;
}
.item-2 {
  grid-column: middle;
  grid-row: row1;
}
.item-3 {
  grid-column: middle;
  grid-row: row2;
}
.item-4 {
  grid-column: last;
  grid-row: row1 / span 2;
}

</style>

<div class="grid-container">
	<div class="grid-item item-1">1</div>
	<div class="grid-item item-2">2</div>
	<div class="grid-item item-3">3</div>
	<div class="grid-item item-4">4</div>
</div>