JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container" style="width: 100%;">
  <div class="col-1 grid-item">
    <asp:Label ID="labFirst" runat="server">第一區</asp:Label>
  </div>
  <div class="col-2 grid-item">
    <asp:Label ID="labSecond" runat="server">第二區</asp:Label>
  </div>
  <div class="col-3 grid-item">
    <asp:Label ID="labThird" runat="server">第三區</asp:Label>
  </div>
  <div class="col-4 grid-item">
    <asp:Label ID="labForth" runat="server">第四區</asp:Label>
  </div>
</div>

CSS

.grid-container {
  display: grid;
  grid-gap: 10px 10px;
  grid-template-areas: "col-1 col-2 col-3" "col-1 col-4 col-4";
  height: 200px;
}

.grid-item {
  margin: 0;
  padding: 30px;
  font-size: 20px;
  text-align: center;
  color: #492645;
}

.col-1 {
  background-color: rgb(238, 216, 214);
  grid-area: col-1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-2 {
  background-color: rgb(210, 228, 230);
  grid-area: col-2;
}

.col-3 {
  background-color: rgb(238, 216, 214);
  grid-area: col-3;
}

.col-4 {
  background-color: rgb(180, 208, 222);
  grid-area: col-4;
}