grid布局 默写第一遍 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid 布局第二遍</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #page {
      display: grid;
      grid-template-rows: 70px 50px auto 70px;
      grid-template-columns: 200px repeat(2, 1fr);
      width: 100%;
      height: 100vh;
      grid-template-areas: 'aside header header' 'aside nav nav' 'aside main main' 'aside footer footer';
    }
    #page > header {
      grid-area: header;
      background-color: pink;
    }
    #page > aside {
      grid-area: aside;
      background-color: aqua;
    }
    #page > nav {
      grid-area: nav;
      background-color: burlywood;
    }
    #page > main {
      grid-area: main;
      background-color: #f5f5f5;
    }
    #page > footer {
      grid-area: footer;
      background-color: blueviolet;
    }
  </style>
  <body>
    <section id="page">
      <header>Header</header>
      <aside>Aside</aside>
      <nav>Nav</nav>
      <main>Main</main>
      <footer>Footer</footer>
    </section>
  </body>
</html>

竟然写了一上午，才搞定 grid-template-areas  

坑：必须要定义宽高；

posted @ 2022-03-22 15:09  苹果π  阅读(21)  评论(0)  编辑  收藏  举报