Здравствуйте, начал разбираться в том. что из себя представляет 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>
