如何在 HTML 和 CSS 中实现这种样式

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "Div-1 Div-4"
    "Div-2 Div-4"
    "Div-3 Div-4";
}
.grid-container div {padding: 10px;}
.Div-4 { grid-area: Div-4; background: #f90;}
.Div-1 { grid-area: Div-1; background: #ccf;}
.Div-2 { grid-area: Div-2; background: #cfc;}
.Div-3 { grid-area: Div-3; background: #fcc;}

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