HTML CSS When creating a grid, the grid is not rendered. can you suggest what to do?

D

Dant3lion2021-06-07 00:32:53

css

Dant3lion, 2021-06-07 00:32:53

Hello, I'm starting to figure it out. what grid is, and tried to create the markup via Grid-template-areas. Unfortunately, when the site is launched, there is a grid container (you can see it if you set the background), but it does not show the grid layout thanks to the border. Please tell me what could be wrong.
Page code:

<!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>