HTML CSS При создании grid сетка не выводится. можете подсказать что делать?

Question

Dant3lion @Dant3lion

HTML CSS При создании grid сетка не выводится. можете подсказать что делать?

Здравствуйте, начал разбираться в том. что из себя представляет grid, и попытался создать разметку через Grid-template-areas. К сожалению, при запуске сайта контейнер грида есть (видно если задать фон), но разметку сетки благодаря border не проявляет. Подскажите пожалуйста, в чём может заключаться ошибка.
Код страницы:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Главная страница</title>
<style>
.grid-container {
height:2000px;
  display: grid;
  grid-template-rows: repeat(24, 100px);
  <!-- grid-template-rows: 20px 50px 70px 300px 200px 50px 80px 20px 500px 40px 150px 20px 600px 20px 500px 100px 40px 100px 100px 100px 30px 150px 50px 50px; -->
  grid-template-columns: repeat(10, 1fr);
  grid-template-areas: "sidebar . . . . . . . . sidebar1"  
                       "sidebar header header header header header header header header sidebar1"  
                       "sidebar . . . . . . . . sidebar1"
					   "sidebar blog blog blog blog . . . . sidebar1"
					   "sidebar . . . . . . . . sidebar1"
					   ". . . . . . . . . ."
					   ". label label label label label label label label ."
					   ". . . . . . . . . ."
					   ". box1 box1 . box2 box2 . box3 box3 ."
					   ". . . . . . . . . ."
					   ". label2 label2 label2 label2 label2 label2 label2 label2 ."
					   ". . . . . . . . . ."
					   ". panel panel panel panel panel panel panel panel ."
					   ". . . . . . . . . ."
					   ". app app app app app app app app ."
					   ". . . . . . . . . ."
					   ". . . . . . . . . . "
					   ". fblock fblock fblock . . . . . ."
					   ". fblock fblock fblock . . . . button ."
					   ". fblock fblock fblock . . . . . ."
					   ". hr hr hr hr hr hr hr hr ."
					   ". bl1 bl1 bl1 bl1 bl1 bl1 bl1 bl1 ."
					   ". bl2 bl2 bl2 bl2 bl2 bl2 bl2 bl2 ."
					   ". bl3 bl3 bl3 bl3 bl3 bl3 bl3 bl3 ."; 
  
  .sidebar {grid-area: sidebar;background: blue; border: solid; border-color:green;}
  .sidebar1 {grid-area: sidebar1;  border: solid; border-color:green;}
  .hdr {grid-area: header;  border: solid; border-color:green;}
  .blog {grid-area: blog;  border: solid; border-color:green;}
  .lb {grid-area: label; border: solid; border-color:green;}
  .b1 {grid-area: box1; border: solid; border-color:green;}
  .b2 {grid-area: box2; border: solid; border-color:green;}
  .b3 {grid-area: box3; border: solid; border-color:green;}
  .lb2 {grid-area: label2; border: solid; border-color:green;}
  .pan {grid-area: panel; border: solid; border-color:green;}
  .appl  {grid-area: app; border: solid; border-color:green;}
  .fblock {grid-area: fblock; border: solid; border-color:green;}
  .hr {grid-area: hr; border: solid; border-color:green;}
  .butt {grid-area: button; border: solid; border-color:green;}
  .bl1 {grid-area: bl1; border: solid; border-color:green;}
  .bl2 {grid-area: bl2; border: solid; border-color:green;}
  .bl3 {grid-area: bl3; border: solid; border-color:green;}
}
</style>
<body>
<div class="grid-container">
<div class="sidebar">
</div>
<div class="hdr">
</div>
<div class="blog">
</div>
<div class="lb">
</div>
<div class="b1">
</div>
<div class="b2">
</div>
<div class="b3">
</div>
<div class="lb2">
</div>
<div class="pan">
</div>
<div class="appl">
</div>
<div class="fblock">
</div>
<div class="hr">
</div>
<div class="butt">
</div>
<div class="bl1">
</div>
<div class="bl2">
</div>
<div class="bl3">
</div>

</div>

</body>
</html>