码迷,mamicode.com
首页 > 其他好文 > 详细

圣杯问题

时间:2018-10-11 23:44:01      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:link   styles   utf-8   tis   href   tle   meta   red   image   

技术分享图片

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

 

圣杯问题

标签:link   styles   utf-8   tis   href   tle   meta   red   image   

原文地址:https://www.cnblogs.com/liverpool-ADH/p/9775439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!