CSS自适应网格布局速成课程理解CSS布局设置cid1056-网页前端设计


布局1

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grids</title>
  <style>
    .wrapper{
      display:grid;
      grid-template-columns: 70% 30%;
      /*
      grid-column-gap:1em;
      grid-row-gap:1em;
      */
      grid-gap:1em;
    }

    .wrapper > div{
      background:#eee;
      padding:1em;
    }
    .wrapper > div:nth-child(odd){
      background:#ddd;
    }

  </style>
</head>
<body>
  <div class="wrapper">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quo eveniet placeat. In porro, repudiandae ipsum voluptatibus ratione enim accusantium rem consequatur ab? Alias tenetur ratione quibusdam accusantium aut quis totam! Voluptas labore officiis, unde sequi ad fuga, ex assumenda dolorem placeat atque excepturi ipsa architecto dolores dignissimos quod quibusdam quasi repellat vero cum perspiciatis laboriosam qui sint exercitationem quisquam. Quisquam suscipit fugiat doloremque quasi ad debitis dolor quaerat nihil aliquam at ducimus consequuntur repudiandae numquam eligendi, fugit, excepturi doloribus!
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorem sit similique sequi veritatis quas soluta nam alias maxime. Quos rerum soluta neque, incidunt eius illum amet laboriosam nostrum vel.
    </div>

    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quo eveniet placeat. In porro, repudiandae ipsum voluptatibus ratione enim accusantium rem consequatur ab? Alias tenetur ratione quibusdam accusantium aut quis totam! Voluptas labore officiis, unde sequi ad fuga, ex assumenda dolorem placeat atque excepturi ipsa architecto dolores dignissimos quod quibusdam quasi repellat vero cum perspiciatis laboriosam qui sint exercitationem quisquam. Quisquam suscipit fugiat doloremque quasi ad debitis dolor quaerat nihil aliquam at ducimus consequuntur repudiandae numquam eligendi, fugit, excepturi doloribus!
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorem sit similique sequi veritatis quas soluta nam alias maxime. Quos rerum soluta neque, incidunt eius illum amet laboriosam nostrum vel.
    </div>
  </div>
</body>
</html>

 

布局2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Grid</title>
  <style>
    .wrapper{
      display:grid;
      /* grid-template-columns:1fr 1fr 1fr;*/
      grid-template-columns:repeat(3, 1fr);
      grid-gap:1em;
      /* grid-auto-rows:100px; */
      grid-auto-rows: minmax(100px, auto);
    }

    .nested{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      grid-auto-rows: 70px;
      grid-gap:1em;
    }

    .wrapper > div{
      background:#eee;
      padding:1em;
    }
    .wrapper > div:nth-child(odd){
      background:#ddd;
    }

    .nested > div{
      border:#333 1px solid;
      padding:1em;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div>
      Lorem ipsum dolor sit.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam libero excepturi cupiditate quasi sit. Iure totam a magni, veritatis, voluptatem voluptates tempora praesentium et nisi eligendi. A saepe eaque aliquam, earum nihil quia? Nemo delectus possimus, explicabo repudiandae recusandae. Mollitia!
    </div>
    <div class="nested">
      <div>Lorem</div>
      <div>Lorem</div>
      <div>Lorem</div>
      <div>Lorem</div>
      <div>Lorem</div>
      <div>Lorem</div>
      <div>Lorem</div>
      <div>Lorem</div>
      <div>Lorem</div>
    </div>
    <div>
      Lorem ipsum dolor sit.
    </div>
    <div>
      Lorem ipsum dolor sit.
    </div>
    <div>
      Lorem ipsum dolor sit.
    </div>
    <div>
      Lorem ipsum dolor sit.
    </div>
  </div>
</body>
</html>

 

布局3

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Grid</title>
  <style>
    .wrapper{
      display:grid;
      grid-template-columns:1fr 2fr 1fr;
      grid-auto-rows:minmax(100px, auto);
      grid-gap:1em;
      justify-items:stretch;
      align-items:stretch;
    }

    .wrapper > div{
      background:#eee;
      padding:1em;
    }
    .wrapper > div:nth-child(odd){
      background:#ddd;
    }

    .box1{
      /*align-self:start;*/
      grid-column:1/3;
      grid-row:1/3;
    }

    .box2{
      /*align-self:end;*/
      grid-column:3;
      grid-row:1/3;
    }

    .box3{
      /*justify-self:end;*/
      grid-column:2/4;
      grid-row:3;
    }

    .box4{
      grid-column:1;
      grid-row:2/4;
      border:1px solid #333;
    }

  </style>
</head>
<body>
  <div class="wrapper">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
    <div class="box box4">Box 4</div>
  </div>
</body>
</html>

 

布局1在线演示?布局2在线演示 布局3在线演示? 让链接同时具备两种打开方式

获取源码: Cssgrid
下载数:25人次, 文件大小: 1.9 KB, 上传日期: 2020年-11月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

1,586 人查阅

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
下载 (4)

您需要先支付 6元 才能查看此处内容!立即支付