gird

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>grid</title>
  5. <link rel="stylesheet" type="text/css" href="grid.css">
  6. </head>
  7. <body>
  8. <div class="wrapper">
  9. <div class="one">1</div>
  10. <div class="two">2</div>
  11. <div class="three">3</div>
  12. <div class="four">4</div>
  13. <div class="five">5</div>
  14. <div class="six">6</div>
  15. </div>
  16. </body>
  17. </html>

css代码

  1. .wrapper{
  2. display: grid;
  3. grid-template-columns: 100px 100px 100px;     /*设置列的大小*/
  4. grid-template-rows: 100px 100px;            /*设置行的大小*/
  5. }
  7. .wrapper div{
  8. border: 1px solid black;
  9. text-align: center;
  10. line-height: 100px;
  11. }

效果

 

定义一个格子的大小

 

  1. .one{
  3. grid-column: 1 / 3;   /*定义列的位置 */
  5. grid-row: 1/ 3;  /*定义行的位置*
  6. }

posted on 2018-09-27 23:00  廖再连  阅读(211)  评论(0)  编辑  收藏  举报

导航