JSFiddle - React, Tailwind, and code Playground

by rockspirit

HTML

<div class="grid-container" style="width: 100%;">
  <div class="col-1 grid-item">
    <asp:Label ID="labRecord" runat="server" CssClass="TitleData">查詢紀錄</asp:Label>
  </div>
  <div class="col-2 grid-item">
    <asp:Label ID="labBookingMeal" runat="server" CssClass="TitleData">預定餐點</asp:Label>
  </div>
  <div class="col-3 grid-item">
    <asp:Label ID="labMealType" runat="server" CssClass="TitleData">訪客用餐</asp:Label>
  </div>
  <div class="col-4 grid-item">
    <asp:Label ID="labForget" runat="server" CssClass="TitleData">未帶餐卡</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";
  justify-content: center;
  /* align-items: stretch; */
}

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

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

.col-1::before,
.col-1::after{
  content:"";
}


.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;
}