Question

我是CSS和HTML的新手，我试图摆脱网格的困扰。似乎相对简单，但是由于某种原因，网格与“网格模板区域”部分中的网格不匹配。如果您在repl.it上运行代码，您将看到除了.topleft选择器之外，所有内容都在排队，尽管它的设置与其他所有内容一样。在https://learn-grids--chrissagan.repl.co/

处复制站点

.container {
      display: grid;
      grid-gap: 5px;
      grid-template-areas: "head head head"
                           "tl tm tr"
                           "ml ml mr"
                           "foot foot foot";
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
    }
    
    header {
      grid-template: head;
      background-color: blue;
    }
    
    .topleft {
      grid-template: tl;
      background-color: green;
    }
    
    .topmiddle {
      grid-area: tm;
      background-color: green;
    }
    
    .topright {
      grid-area: tr;
      background-color: green;
    }
    
    .middleleft {
      grid-area: ml;
      background-color: brown;
    }
    
    .middleright {
      grid-area: mr;
      background-color: brown;
    }
    
    footer {
      grid-area: foot;
      background-color: aqua;
    }

<!DOCTYPE html>
    
    <html>
    
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Grids r Weird</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
      </head>
    
      <body>
      <div class="container">
    
       <header>
         <h1>Header</h1>
       </header>
    
        <section class="topleft">
        <h3>Top Left</h3>
        </section>
    
        <section class="topmiddle">
        <h3>Top Middle</h3>
        </section>
    
        <section class="topright">
        <h3>Top Right</h3>
        </section>
    
        <section class="middleleft">
        <h3>Middle Left</h3>
        </section>
    
        <section class="middleright">
        <h3>Middle Right</h3>
        </section>
    
        <footer>
         <h1>footer</h1>
        </footer>
    
        </div>
    
      </body>
    
    </html>

我希望页面上的网格能够像我在grid-template-area中概述的那样显示。除了.topleft部分之外，其他所有功能都可以。

如何使用网格模板区域修复网格的未对齐部分

0 个答案: