CSS 网格布局

最新推荐文章于 2023-09-14 16:49:25 发布

Licy92

最新推荐文章于 2023-09-14 16:49:25 发布

阅读量131

点赞数

分类专栏： css 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_42414668/article/details/88946451

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<div class="container">
    <header>Header</header>
    <nav>Nav</nav>
    <main>Main</main>
    <aside>Aside</aside>
    <footer>Footer</footer>
</div>

<style>
   .container {
    display: grid;
    grid-template-rows: 1fr 5fr 1fr;
    grid-template-columns: 2fr 5fr 3fr;
    width: 100vw;
    height: 100vh;
    background: #eee;
    grid-gap: .75em;
    grid-template-areas:
      "header header header"
      "nav    main   aside"
      "footer footer footer";
   }
   header {
    grid-area: header;
    background: lightcoral;
   }
   nav {
    grid-area: nav;
    background: lightblue;
   }
   main {
    grid-area: main;
    background: lightgray;
   }
   aside {
    grid-area: aside;
    background: lightgoldenrodyellow;
   }
   footer {
    grid-area: footer;
    background: lightseagreen;
   }
 </style>