সিএসএস grid-template-areas

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 100px 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 5px;
}

.header {
  grid-area: header;
  background-color: lightgray;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgray;
}

.main {
  grid-area: main;
  background-color: lightgray;
}

.footer {
  grid-area: footer;
  background-color: lightgray;
}
</style>
</head>
<body>

<div class="container">
  <div class="header">হেডার</div>
  <div class="sidebar">সাইডবার</div>
  <div class="main">মেইন</div>
  <div class="footer">ফুটার</div>
</div>

</body>
</html>