grid响应式布局

最新推荐文章于 2024-07-21 17:23:08 发布

weixin_34250434

最新推荐文章于 2024-07-21 17:23:08 发布

阅读量120

点赞数

<!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>

weixin_34250434

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
grid响应式布局

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ padding:0; margin:0;
复制链接

扫一扫