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在线演示? 让链接同时具备两种打开方式