grid响应式布局 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
  	padding:0;
  	margin:0;
  }

  .box {
    background-color: #444;
    color: #fff;
    padding: 20px;
  }

  .header,
  .footer {
    background-color: #999;
  }

  .sidebar2 {
    background-color: #ccc;
    color: #444;
  }

  .sidebar {
    grid-area: sidebar;
  }

  .sidebar2 {
    grid-area: sidebar2;
  }

  .content {
    grid-area: content;
  }

  .header {
    grid-area: header;
  }

  .footer {
    grid-area: footer;
  }

  @media only screen and (min-width: 400px) {
    .wrapper {
      display: grid;
      grid-template-columns: 80px 10px auto;
      grid-template-rows: auto;
      grid-template-areas: 
      "header header header" 
      "sidebar . content" 
      "sidebar2 sidebar2 sidebar2" 
      "footer footer footer";
    }
  }

  @media only screen and (min-width: 700px) {
    .wrapper {
      display: grid;
      grid-template-columns: 100px 20px auto 20px 100px;
      grid-template-rows: auto;
      grid-template-areas: 
      "header header header header header" 
      "sidebar . content . sidebar2" 
      "footer footer footer footer footer";
    }
  }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="box header">Header</div>
    <div class="box sidebar">Sidebar</div>
    <div class="box sidebar2">Sidebar 2</div>
    <div class="box content">
      <h2>Content</h2>
      <p>More content than we had before so this column is now quite tall.</p>
    </div>
    <div class="box footer">Footer</div>
  </div>
</body>

</html>
posted @ 2017-07-28 15:28  wmui  阅读(290)  评论(0)  编辑  收藏  举报