今天学习了一下grid布局，不得不感叹它比flex布局更加强大，也更加的灵活。下面用grid实现了一个响应式布局。有错误的地方欢迎大家指正。

效果图：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>css3实现响应式布局</title>    <style>      .item1 {        background-color: aqua;        grid-area: header;      }      .item2 {        background-color: blueviolet;        grid-area: nav;      }      .item3 {        background-color: chocolate;        grid-area: content;      }      .item4 {        background-color: darkseagreen;        grid-area: footer;      }      .container {        width: 100%;        min-height: 300px;        display: grid;        grid-template-columns: 1fr;        /* fr单位代表网格容器中可用空间的一等份。 */        grid-template-rows: 50px auto 1fr 50px;        grid-template-areas: "header" "nav" "content" "footer";        grid-gap:10px;      }      @media (min-width: 300px) {        .container {          grid-template-columns: auto 1fr;          grid-template-rows: 50px auto 50px;          grid-template-areas: "nav header" "nav content" "nav footer";        }      }      @media (min-width: 400px){          .container{              grid-template-columns: auto 1fr;              grid-template-rows: 50px auto 50px;              grid-template-areas: "header header" "nav content" "footer footer";          }      }    </style>  </head>  <body>    <section class="container">      <div class="item1">header</div>      <div class="item2">nav</div>      <div class="item3">content</div>      <div class="item4">footer</div>    </section>  </body></html>

文章推荐：

  • http://www.ruanyifeng.com/blo...
  • https://developer.mozilla.org...