Grid布局

最新推荐文章于 2024-04-25 20:19:13 发布

Icon_酱

最新推荐文章于 2024-04-25 20:19:13 发布

阅读量109

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/yytIcon/article/details/130052245

版权

此HTML代码展示了如何使用CSSGrid创建复杂的响应式布局。内容包含两个主要的grid容器，分别定义了不同的列和行结构，以及grid-area属性来定位各个子元素。设计中考虑了不同区域的背景色和尺寸，适应不同屏幕尺寸。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>Document</title>
    <style type="text/css">
      body {
        padding: 0;
        margin: 0;
      }
      .content {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 56px 40px 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        height: 100vh;
        width: 100vw;
      }

      .div1 {
        grid-area: 1 / 1 / 4 / 3;
        background: #e6ceac;
      }
      .div2 {
        background: #ecad9e;
        grid-area: 1 / 1 / 2 / 3;
      }
      .div3 {
        background: #e6ceac;
        grid-area: 2 / 1 / 4 / 2;
      }
      .div4 {
        background: #bee7e9;
        grid-area: 2 / 2 / 4 / 3;
      }
      .div5 {
        background: #d1ba74;
        grid-area: 2 / 2 / 3 / 3;
      }
      .div6 {
        background: #efefef;
        grid-area: 3 / 2 / 4 / 3;
        padding: 10px;
      }
      .app-main {
        height: 100%;
        background-color: white;

        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 40px 1fr 50px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
      }

      .item1 {
        background: #bee7e9;
        grid-area: 1 / 1 / 4 / 3;
      }
      .item2 {
        background: #d1ba74;
        grid-area: 1 / 1 / 2 / 3;
      }
      .item3 {
        background: #19caad;
        grid-area: 2 / 1 / 3 / 3;
      }
      .item4 {
        background: #ecad9e;
        grid-area: 3 / 1 / 4 / 3;
      }
      .item5 {
        background: #8cc7b5;

        grid-area: 1 / 1 / 2 / 2;
      }
      .item6 {
        background: #d1ba74;
        grid-area: 1 / 2 / 2 / 3;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="div1">1</div>
      <div class="div2">2</div>
      <div class="div3">3</div>
      <div class="div4">4</div>
      <div class="div5">5</div>
      <div class="div6">
        <div class="app-main">
          <div class="item1">11</div>
          <div class="item2">22</div>
          <div class="item3">33</div>
          <div class="item4">44</div>
          <div class="item5">55</div>
          <div class="item6">66</div>
        </div>
      </div>
    </div>
  </body>
</html>