grid

<!DOCTYPE html>
<html>
 <head>
  <meta charset="{CHARSET}">
  <title>11</title>
  <style type="text/css">
   .wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px  100px;
    }
    .item1 {
    grid-column-start: 1;
    grid-column-end: 4;
    background-color: red;
}
    .item2 {
    grid-column-start: 2;
    grid-column-end: 4;
    background-color: goldenrod;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
        background-color: green;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
        background-color: gray;
}
.item5 {
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: palegreen;
}
.item6{
    grid-column-start: 3;
    grid-column-end: 3;
    background-color: aliceblue;
}
  </style>
  
 </head>
 <body>
  <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>

posted @ 2018-10-07 22:54  尘封于世  阅读(123)  评论(0)    收藏  举报