圣杯问题

最新推荐文章于 2022-04-18 19:29:17 发布

weixin_30861797

最新推荐文章于 2022-04-18 19:29:17 发布

阅读量219

点赞数

原文链接：http://www.cnblogs.com/liverpool-ADH/p/9775439.html

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>practise</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>
      <div class="wrapper">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
    </div>
  </body>
</html>

.wrapper {
  display:grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px 80px 80px;
}
.item1{
    background: red;
    grid-area: 1/1/2/4;
}
.item2{
    background: green;
    grid-area: 2/1/5/2;
}
.item3{
    background: blue;
    grid-area: 2/2/3/3;
}
.item4{
    background: black;
    grid-area: 3/2/4/3;
    color: white;
}
.item5{
    background: yellow;
    grid-area: 4/2/5/3;
}
.item6{
    background: pink;
    grid-area: 2/3/5/4;
}